CODEWITHSUNDEEP
javascriptreactjs
Pratik Shinde
Pratik Shinde

Reputation: 69

I getting this error 'Uncaught Error: Objects are not valid as a React child' even if I used Array of objects what to do

`

const fashionCardData = [
  { id: "1", src: "1.png" },
  { id: "2", src: "2.png" },
  { id: "4", src: "4.png" },
];

const Products = () => {
  return (
    <Box>
      {fashionCardData.map((item)=>{
        <img key={item.id} src={`images/${item.src}`} alt={item.id}/>
      })}
    </Box>
  );
};

`

I am trying to map an array but it doesn't work please help

Upvotes: 0

Views: 44

Answers (2)

Harish Pydimarri
Harish Pydimarri

Reputation: 131

Problem is you are not returning the component.

Change your code to

{fashionCardData.map((item)=>{
    return (<img key={item.id} src={`images/${item.src}`} alt={item.id}/>);
  })}

Code that is inside {} will be treated as javascript and similarly code that is inside () will be treated as jsx.

Upvotes: 1

The KNVB
The KNVB

Reputation: 3844

Replace

{fashionCardData.map((item)=>{
    <img key={item.id} src={`images/${item.src}`} alt={item.id}/>
  })}

with

{fashionCardData.map((item)=>(
    <img key={item.id} src={`images/${item.src}`} alt={item.id}/>
  ))}

Upvotes: 3

Related Questions