¿Estoy tratando de desestructurar mi matriz de objetos con .map? He intentado algunas cosas, pero me sigo atascando. Puedo acceder a datos individuales usando el índice, pero tengo problemas para hacerlo por todos.

se que es algo asi

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

También probé esto -

 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 } }

Esto es lo que quiero lograr

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