Prop from Flask backend not passing to component 'TypeError: undefined is not an object (evaluating 'undefined.props')'

Question

Emitted a lot of code for easy reading.

TypeError: undefined is not an object (evaluating 'undefined.props')

<PortfolioAssets data={this.props.data} onClose={function(event){ closeCard(); handleSnackbarClick()}} />

I am passing a prop from App.js to the DashboardView component:

import {
  Dashboard as DashboardView,
} from './views';

function App() {
  const [response, setResponse] = useState("");

  useEffect(() => {
    const socket = socketIOClient(ENDPOINT);
    socket.emit('test', {"name": "jim"})
    socket.on("test_client", data => {
      setResponse(data);
    });
  }, []);

  const Routing = [
    {
      path: 'app',
      element: <DashboardLayout />,
      children: [
        { path: 'dashboard', element: <DashboardView data={response}/> },
      ]
    }
  ];

  const routing = useRoutes(Routing);

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      {routing}
    </ThemeProvider>
  );
}

export default App;

I then try to pull in the prop inside DashboardView:

const Dashboard = (props) => {
  const classes = useStyles();

  const [showCard, setShowCard] = React.useState(true)
  const closeCard = () => setShowCard(false)

  return (
    <div style = {{padding: "2%"}} >
      <ResponsiveReactGridLayout
      >
        { showCard ? <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 4, minW: 1, minH: 4, maxW: 4, maxH: 4}}>
          <PortfolioAssets data={this.props.data} onClose={function(event){ closeCard(); handleSnackbarClick()}} />
        </div> : <div key="dummy"></div> }
      </ResponsiveReactGridLayout>
    </div>
  )
}

export default Dashboard;

But I get the 'TypeError: undefined is not an object (evaluating 'undefined.props')'

I want the prop to come from the Flask backend (contains JSON data) so I can then populate each component with the JSON data.

Any help is appreciated, thank you.

Answer 1

I found that this.props.data needed to be props.data since it is not a class.