Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

72
Views
.map Issue not showing props
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} />)
    )}
  </>
);
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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}) => {...}
about 4 years ago · Juan Pablo Isaza Report

0

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} />)
        )}
      </>
    );
about 4 years ago · Juan Pablo Isaza Report

0

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

And put the variable in your return like this:

 {items}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!