React: how to map a nested array object from state?

Question

I've been trying to map over the product object below coming from state to display divs with their corresponding size in React.

{ 
    name: 'Aphelandra',
    image: './prod-img/aphelandra.jpeg',
    description: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit.',
    size: 
    [
      {
      title: 'sm',
      price: 31,
      countInStock: 111,
      },
      {
      title: 'md',
      price: 56,
      countInStock: 24,
      },
      {
      title: 'lg',
      price: 88,
      countInStock: 13,
      }
    ],
  },
  {

I have been trying unsuccesfully to do this with different variations of this function:

<div>
  {product.size.map(title => (
    <div>{title}</div>
  ))}
</div>

Other properties display fine like this: <p>{product.description}</p>

But I cant find a way to get size. Most common error is cannot read property 'map' of undefined

How can I get through this array?

Sakshi · Accepted Answer · 2021-01-27 06:08:38Z

1

Do this:

<div>
  {product&&product.size?product.size.map(item => (
    return (<div>{item.title}</div>)
  )):null}
</div>

answered Jan 27, 2021 at 6:08

Sakshi

1,5563 gold badges11 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

React: how to map a nested array object from state?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related