TypeError: Cannot read property 'map' of undefined on reactJS

Question

I had to do something similar to this before (displaying items in a grid) so I tried to follow that pattern. I have stared at this for a while trying to figure out what is wrong. Is there something I'm not seeing? Help

Error message

   9 |   console.log(localStorage.getItem("shoppingCart")),
  10 | <div>
  11 |   <Grid container spacing={3}>
> 12 |   {items.map((item) => (
  13 |       <Grid item key={item.VinylID} xs={12} sm={4} >
  14 |           <CartLayout item={item} />
  15 |         {/* <cartLayout

CartItems.js

const CartItems = ({items}) => {
  const classes = useStyles();
  return (
      console.log(localStorage.getItem("shoppingCart")),
    <div>
      <Grid container spacing={3}>
      {items.map((item) => (
          <Grid item key={item.VinylID} xs={12} sm={4} >
              <CartLayout item={item} />
            {/* <cartLayout
              item={lineItem}
              onUpdateCartQty={onUpdateCartQty}
              onRemoveFromCart={onRemoveFromCart}
            /> */}
          </Grid>
        ))}

CartLayout.js

const cartLayout = ({ item }) => {
  const classes = useStyles();
  return (
    <Card className="cart-item">
      {/* <CardMedia/> */}
      <CardContent className={classes.cardContent}>
        <Typography variant="h4"> {item.Name} </Typography>
        <Typography variant="h5"> ${item.VinylPrice} </Typography>
      </CardContent>
      <CardActions className={classes.cartActions}> 
      <div className={classes.buttons}>
          <Button variant="contained" type="button" color="secondary">
              Remove
          </Button>
      </div>
      </CardActions>
    </Card>
  );
};

export default cartLayout;

Cart.js

  constructor(props) {
    super(props);
    this.state = {
      currentData: JSON.parse(localStorage.getItem("shoppingCart")).items,
    };
  }

  render() {
    return (
      <div>
        <CartItems currentData={this.state.currentData}/>
      </div>
    )
  }
}

Viet · Accepted Answer · 2021-04-21 06:45:18Z

1

You need fix: <CartItems items={this.state.currentData}/>

answered Apr 21, 2021 at 6:45

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

astroelle Over a year ago

Thank you!! I can't believe I overlooked that. You're a lifesaver

Sowam · Accepted Answer · 2021-04-21 06:46:52Z

1

Problem

You are passing currentData={this.state.currentData} as a prop but then you are trying to find items const CartItems = ({items}) => {

Solution

You just have to simply change it to items={this.state.currentData}

answered Apr 21, 2021 at 6:46

Sowam

1,7665 gold badges16 silver badges32 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property 'map' of undefined on reactJS

2 Answers 2

1 Comment

Problem

Solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Problem

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related