How to destructure my api data in reactjs?-CodePudding

I am trying to destructure my array of objects with .map ? I have tried a few things but keep getting stuck. I am able to access single data by using the index but struggling with how to do it for them all.

I know it's something like this

const {name} = product;
and
const {attributes:name} = product;
but they don't work, they print "undefined".

Also tried this -

console.log(product.map(({name}) => (console.log(name))))

This is the data 

    console.log(product);
    
    
    {
        "attributes": {
            "image": {
                "data": []
            },
            "name": "test",
            "description": "test product",
            "price": 20,
            "quantity": 0
        }
    }

This is what I want to achieve

<div className='grid grid-cols-4'>
        {product.map(({attributes: name})=> (
          <p>{name}</p>
        ))}
      </div>

CodePudding user response：

It's possible to destructer nested object.

Try something like this:

product.map(({attributes:{name}})=> ...

CodePudding user response：

since it's Object this will work

const { name } = product.attributes;

<p>{product.attributes.name}</p>