Puedo perder algo en el camino. Quiero pasar argumentos de objeto a un niño para representarlo dinámicamente de tres maneras diferentes.
Aquí está mi objeto:
const cards = [ { imgSrc: "first", desc: "some text" }, { imgSrc: "second", desc: "some text" }, { imgSrc: "third", desc: "some text" } ];Este es el componente de los niños:
import { Box } from '@mui/system' import React from 'react' import "../../style/main.scss" import first from "../../images/veloce.png" import second from "../../images/sicuro.png" import third from "../../images/vicino.png" import { Typography } from '@mui/material' function Card( source, text ) { return ( <Box className="foundation-card"> <img src={source}/> <Typography variant="h6">{text}</Typography> <Typography variant="body2">{text}</Typography> </Box> ) } export default CardY luego tengo el componente principal donde quiero representar varias tarjetas mapeando la matriz de tarjetas:
import Card from "./Card" import CustomDivider from "../foundation/CustomDivider" function Values() { return ( <Box className="vertical-box main-maxw section-margin"> <Typography variant="h4">Perchè sceglierci</Typography> <CustomDivider /> <Box className="foundation-box values"> {cards.map((p) => { return <Card source={p.imgSrc} text={p.desc} /> })} </Box> </Box> ) } export default Valuesy luego recibo esto:
Error: los objetos no son válidos como hijos de React (encontrado: objeto con claves {}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.
Supongo que es un error estúpido, pero estoy en mi primer acercamiento y no sé cómo moverme. Gracias a todos.
Creo que el problema es que la función de su tarjeta está esperando argumentos posicionales pero la está llamando con un objeto.
<Card source={p.imgSrc} text={p.desc} /> // These two things are equivalent. Card({source: p.imgSrc, text: p.desc})Básicamente, estaba asignando el argumento de origen y el objeto que contenía tanto el origen como el texto.
Intente cambiar la función de su tarjeta para aceptar un objeto
function Card({source, text}) { ... }Veo algunas cosas extrañas.
1- donde está mapeando las tarjetas, no está importando la matriz de tarjetas, o no puedo ver de dónde está obteniendo la matriz de tarjetas
2- la tarjeta de función es un componente de reacción, por lo que debe envolver los accesorios con {} así: tarjeta de función ({fuente, texto})