export const products = [ { id: 1, title: "Chocotorta", desciption: "Torta de chocolate y dulce de leche", price: "$2,40", imgDesc: "", imgUrl: "" } ]; const Item = (prod) => { return ( <> <Card key={prod.id}> <CardImg alt={prod.imgDesc} src={prod.imgUrl} top width="100%" /> <CardBody> <CardTitle tag="h5">{prod.title}</CardTitle> <CardSubtitle className="mb-2 text-muted" tag="h6"> {prod.price} </CardSubtitle> <CardText>{prod.desciption}</CardText> <Button>Mostrar detalle</Button> </CardBody> </Card> </> ); }; return ( <> {loading ? ( <div style={spinnerStyle}> <Spinner color="primary" size=""> . </Spinner> </div> ) : ( products.map((prod) => <Item prod={products} />) )} </> );Cambiaría el nombre del elemento del map a itemProd o algo así, prod se usa mucho en este fragmento. Dicho esto, no está pasando nada al <Item /> , su fragmento debería ser algo como:
products.map((itemProd) => <Item prod={itemProd} />)Editar: en realidad parece que también necesitas hacer esto:
const Item = ({prod}) => {...}hola creo que esto es lo que buscas
export const products = [ { id: 1, title: "Chocotorta", desciption: "Torta de chocolate y dulce de leche", price: "$2,40", imgDesc: "", imgUrl: "" } ]; const Item = ({prod}) => { return ( <> <Card> <CardImg alt={prod.imgDesc} src={prod.imgUrl} top width="100%" /> <CardBody> <CardTitle tag="h5">{prod.title}</CardTitle> <CardSubtitle className="mb-2 text-muted" tag="h6"> {prod.price} </CardSubtitle> <CardText>{prod.desciption}</CardText> <Button>Mostrar detalle</Button> </CardBody> </Card> </> ); }; return ( <> {loading ? ( <div style={spinnerStyle}> <Spinner color="primary" size=""> . </Spinner> </div> ) : ( products.map((product) => <Item prod={product} key={product.id} />) )} </> ); const items = products.map((item) => { return (<Item prod={item} key={item.id} />) }) ;Y pon la variable en tu declaración así:
{items}