estoy realizando un ejercicio de React y tengo que mostrar en la pantalla los datos que recibo de un archivo Json. Recibo bien los datos, le hago dos map, para acceder a un array anidado, le realizo un console.log que si me pinta lo que necesito, pero al pasarle estos datos al componente hijo me falla. No se si me he explicado bien, si hay alguna duda, respondere encantado. Gracias por su ayuda.
Este es la parte del código del componente padre. Solo pongo el trozo necesario.
<Typography paragraph>
{
CartaJson.carta.map((cartas)=>
cartas.entrantes.map((entrante) => {
console.log(entrante.id)
return(
<CardMenu key={entrante.id} entrante={entrante}/>
)
})
)
}
</Typography>
Aquí el componente hijo, donde debería recibir los datos y donde me da el error.
const CardMenu = ({entrante}) => {
return (
<div>
<h3>Entrantes</h3>
<p>{entrante.nombre}</p>
<img src= {entrante.image} alt= {entrante.alt}/>
</div>
)
}
Y el archivo Json de donde saco los datos.
{
"carta": [
{
"entrantes": [
{
"id": 101,
"nombre": "Gambas al ajillo",
"image": "https://i-ticketing.iwos.com/256x256-th/products/165/products_165_4.png",
"alt": "Gambas al ajillo",
"precio": 15.90,
"vegetariano": false,
"vegano": false,
"menu": true,
"alergenos": [
"crustaceos"
],
"observaciones":null
},
{
"id": 102,
"nombre": "Ensalada del Mesón",
"image": "https://media-cdn.tripadvisor.com/media/photo-s/1b/c2/f9/56/ensalada.jpg",
"alt":"Ensalada del Mesón",
"precio": 8.60,
"vegetariano": false,
"vegano": false,
"menu": false,
"alergenos": [
"huevos",
"crustaceos"
],
"observaciones":null
},
{
"id": 103,
"nombre": "Pulpo a la Gallega",
"image": "https://lacocinademasito.com/wp-content/uploads/2021/02/Pulpo-a-la-gallega.jpg",
"alt":"Pulpo a la gallega",
"precio": 15.90,
"vegetariano": false,
"vegano": false,
"menu": true,
"alergenos": [
"crustaceos"
],
"observaciones":null
},
{
"id": 104,
"nombre": "Tartar de Salmón Marinado",
"image": "https://elfornerdealella.com/wp-content/uploads/2021/03/Tartar-de-salmo%CC%81n-marinado.jpg",
"alt":"Tartar de Salmón",
"precio": 10.50,
"vegetariano": false,
"vegano": false,
"menu": false,
"alergenos": [
"pescado"
],
"observaciones":null
},
{
"id": 105,
"nombre": "Gazpacho Andaluz",
"image": "http://www.comedera.com/wp-content/uploads/2015/06/gazpacho.jpg",
"alt":"Gazpacho",
"precio": 7.50,
"vegetariano": true,
"vegano": true,
"menu": true,
"alergenos": [
"gluten"
],
"observaciones":null
},
{
"id": 106,
"nombre": "Carpaccio de Salmón Marinado",
"image": "https://cdn.shopify.com/s/files/1/0497/1659/2805/products/CARPACCIO_SALMON_100G_1200x.png?v=1641931394",
"alt":"Carpaccio de Salmón",
"precio": 10.90,
"vegetariano": false,
"vegano": false,
"menu": true,
"alergenos": [
"pescado",
"lacteo"
],
"observaciones":null
}
]
},
{
"tapas": [
{
"id": 201,
"nombre": "Ensaladilla Rusa",
"image": "https://images.hola.com/imagenes/cocina/recetas/20191007150998/ensaladilla-rusa/0-729-420/ensaladilla-m.jpg",
"alt":"Ensaladilla Rusa",
"precio": 5.90,
"vegetariano": false,
"vegano": false,
"menu": false,
"alergenos": [
"crustaceos",
"lacteos",
"huevos"
],
"observaciones":null
},
{
"id": 202,
"nombre": "Patatas bravas",
"image": "https://unareceta.com/wp-content/uploads/2017/06/patatas-bravas.jpg",
"alt":"Patatas Bravas",
"precio": 4.90,
"vegetariano": true,
"vegano": false,
"menu": true,
"alergenos": [
"lacteos"
],
"observaciones":null
},
{
"id": 203,
"nombre": "Callos de ternera",
"image": "https://res.cloudinary.com/unaderecetas/image/upload/callos-de-ternera/callos_base_1.jpg",
"alt":"Callos de ternera",
"precio": 7.50,
"vegetariano": false,
"vegano": false,
"menu": false,
"alergenos": false,
"observaciones":null
},
{
"id": 204,
"nombre": "Fritura de Pescados",
"image": "https://i.blogs.es/0ba695/el-pescaito-frito-y-las-sopas-frias-enganchan-cada-dia-a-mas-turistas-hacia-la-costa-del-sol/450_1000.jpg",
"alt":"Fritura de pescado",
"precio": 13.50,
"vegetariano": false,
"vegano": false,
"menu": true,
"alergenos": [
"pescados",
"crustaceos",
"moluscos",
"gluten"
],
"observaciones":null
},
{
"id": 205,
"nombre": "Tortilla de patatas",
"image": "https://static2.abc.es/media/bienestar/2020/05/22/[email protected]",
"alt":"Tortilla de patatas",
"precio": 4.90,
"vegetariano": true,
"vegano": false,
"menu": true,
"alergenos": [
"gluten",
"huevos"
],
"observaciones":null
},
{
"id": 206,
"nombre": "Calamares a la Romana ",
"image": "https://unareceta.com/wp-content/uploads/2017/04/calamares-a-la-romana-tiernos-818x614.jpg",
"alt":"Calamares a la romana",
"precio": 8.90,
"vegetariano": false,
"vegano": false,
"menu": true,
"alergenos": [
"moluscos",
"huevos",
"gluten"
],
"observaciones":null
}
]}
]}