[Solved] TypeError: Cannot read properties of undefined (reading 'name') in React

Problem: Got this error below

TypeError: Cannot read properties of undefined (reading 'name') in React

Solution 1:

You didn't pass the invoice prop to your <Invoice/> component, so it's undefined by default, and then you're referencing the property name in the Invoice component of an undefined prop, therefore you get the error.

Make the following change

const Products = () => {
  return (
    <main>
      <Grid container justify="center" spacing={4}>
        {invoices.map((invoice) => (
          <Grid item key={invoice.id} xs={12} sm={6} md={4} lg={3}>
            <Invoice invoice={invoice}/>
          </Grid>
        ))}
      </Grid>
    </main>
  );
};

Solution 2:

It appears we are not passing the invoice as a prop to you <Invoice /> component.

Add this to your map:

{invoices.map((invoice) => (
    <Grid item key={invoice.id} xs={12} sm={6} md={4} lg={3}>
       <Invoice invoice={invoice}/>
    </Grid>
))}

Thank you for reading the article.