En este código, todo se imprime correctamente excepto mis "sabores" que solo devuelven un valor de propiedad (el que está en el índice 0] en el navegador en lugar de la matriz que se supone que debe mostrar. Debería mostrar 3 sabores por entrada. Creo que la respuesta sería mapear esa matriz dentro de mi matriz actual de entradas, pero no estoy seguro de cómo escribir esto. ¡Se agradece cualquier ayuda o consejo!
return ( <> <article className="entries"> { entries.map(entry => { return <section key={`entry--${entry.id}`} className="entry"> <div> <ul> <div><img src={entry.image} height="300" /></div> <li>Name: {entry.name}</li> <li>Brewing Method: {entry.brewing_method.type}</li> <li>Grind Setting: {entry.grind_setting}</li> <li>Rating: {entry.rating}</li> <li>Flavors: {entry?.flavor_profile[0]?.name}</li> <li>Notes: {entry.notes}</li> </ul>Necesitará un map() para representar una lista anidada o simplemente una cadena de sabores
Para solo una cadena de 3 sabores, independientemente del número real, puede slice() y luego map() la propiedad del nombre y finalmente join() .
<li>Flavors: {entry.flavor_profile?.slice(0, 3).map(({ name }) => name).join(', ')}</li> Para obtener una lista, deberá crear un <ul> anidado poblado con los elementos de tipo <li> mapeados
return ( <> <article className="entries"> { entries.map(entry => { return ( <section key={`entry--${entry.id}`} className="entry"> <div> <ul> <div><img src={entry.image} height="300" /></div> <li>Name: {entry.name}</li> <li>Brewing Method: {entry.brewing_method.type}</li> <li>Grind Setting: {entry.grind_setting}</li> <li>Rating: {entry.rating}</li> <li>Flavors: <ul> { entry.flavor_profile?.map(({ name }) => ( <li>{name}</li> )) } </ul> </li> <li>Notes: {entry.notes}</li> </ul> </div> </section> ) }) } </article> </> );