0

I have a data like below

export const DataShirts = [
    {
        type:"tshirt",
        brand:"Levis"
    },
    {
        type:"tshirt",
        brand:"Duke"
    }
]

I am trying to send props in Home.js

{ data && data.length > 0 ? data?.map((item,index) => {
    return <Grid key={index} item xs={6} md={3}> <ProductCard item={item} /> </Grid>}) : null}

in ProductCard.js component file

const ProductCard = ({item}) => {
    
    console.log(item.brand)   // it's return undefined at second render
    return (
        <>

        </>
    )
}

what is the mistake here.

After Update the code

enter image description here

At first time, the output is correct, but second time it is showing undefined.

Why it render second time?

Liam neesan
  • 2,282
  • 6
  • 33
  • 72
  • It should work (though not how you expect) based on what you've pasted. You can just `DataShirts.map`, you don't need `Object.values()`. Additionally, you're passing the whole item as the `brand` prop, so `brand` should log the full object and `type` would be undefined. – Tom Mar 28 '23 at 20:16
  • 1
    you need to `return ` in your `map` function - you are not `return`ing anything at the moment so nothing will get rendered. – Robin Zigmond Mar 28 '23 at 20:21
  • Does this answer your question? [When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/questions/28889450/when-should-i-use-a-return-statement-in-es6-arrow-functions) – pilchard Mar 28 '23 at 20:22
  • 1
    since u are passing the object as `brand` what you are getting on the side as `props` will look something like `props = {brand:{...}}` so you need `{brand} = props`. now brand is a object which has the properties `brand` and `type`. so `console.log(brand.brand)` and `brand.type` – cmgchess Mar 28 '23 at 20:31

1 Answers1

2
  • first just use map, you don't need Object.values.
  • also you don't return the component in the map function, so you're basically returning undefined for each entry.
  • You must provide a unique key prop to the ProductCard component in the map callback, or React will have issues to update the components (adding a unique _id field to the data would be nice).
  • you're passing the whole item object as brand prop, so type will be undefined.

to summarize, with the data :

{DataShirts.map((item) => <ProductCard key={item.brand + item.type} item={item} />)}

const ProductCard = ({ item }) => {
    console.log(item.brand) // will print the brand
    return (<></>)
}
Nathan Schwarz
  • 631
  • 5
  • 19
  • what if I have more than one line in my map return – Liam neesan Mar 28 '23 at 20:28
  • @Liamneesan what do you mean ? The map must return an array of React Components. If you have a multi Line Component you can do : `(item) => (...sub components ))` – Nathan Schwarz Mar 28 '23 at 20:32
  • 1
    @Liamneesan then use `DataShirts.map((item) => {//do stuff and finally return })` – cmgchess Mar 28 '23 at 20:33
  • @NathanSchwarz it's rendering 2 times, first time render i got the result in console log. second time item.brand is undefined error. – Liam neesan Mar 28 '23 at 20:52
  • @Liamneesan this is not related to the code you provided but either to the data source / hooks you're using on the data. Please provide a full example. – Nathan Schwarz Mar 28 '23 at 21:51
  • @NathanSchwarz i found, thats my silly mistake. map function is working fine. I call the in another place without passing props, it expects props. so sad. I wasted a long time. – Liam neesan Mar 28 '23 at 21:54