tengo datos en este formato
{ "id": 1, "brands": [], // "n" number of items inside this brands "title": "Phone", "image": "/image.png", "timestamp": "2022-01-30T23:15:45.355411+05:30", "updated": "2022-01-30T23:18:05.053914+05:30" }Dentro de los datos de las marcas es así
brands": [{ "title": "Phone", "id": 1, "products": [{ "id": 1, "name": "iPhone 13", "image": "/image.png", "timestamp": "2022-01-30T23:22:11.259452+05:30", "updated": "2022-01-30T23:22:11.259452+05:30", "variant": "256 Storage", }] }]Puedo mostrar campos de categorías como ID de título, etc. haciendo esto
{ categories.map((items) => ( <Col key={items.id} sm={12} md={8} lg={4} xl={3} > <div>{items.title}</div> </Col> )) } Pero al hacer onClick , quiero mostrar las marcas anidadas en esa categoría. Al ser nuevo en JS y reaccionar, no conozco la sintaxis adecuada para acceder a los elementos anidados.
Creo que algo como esto podría funcionar.
{categories.map(category => ( <Col key={category.id} sm={12} md={8} lg={4} xl={3} > <div>{category.title}</div> <h2>Brands</h2> <div> {category.brands.map(brand => ( <div> <div>{brand.title}</div> <ul> brand.products.map(product => ( <li> <b>{product.name}</b> <b>{product.timestamp}</b> <img src={product.image}/> <span>{product.id}</span> </li> )) </ul> </div> ))} </div> </Col> ))}