.map Issue not showing props-CodePudding

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} />)
    )}
  </>
);

CodePudding user response：

I would rename the map element to itemProd or something, prod is used a lot in this snippet. That being said, you aren't passing anything into the <Item />, your snippet should be something like:

products.map((itemProd) => <Item prod={itemProd} />)

Edit: actually it looks like you also need to do this as well:

const Item = ({prod}) => {...}

CodePudding user response：

Hi I guess this is what you are looking for

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} />)
    )}
  </>
);

CodePudding user response：

 const items =
    products.map((item) => {
        return (<Item prod={item} key={item.id} />)
    })
;

And put the variable in your return like this:

 {items}