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

Question

`

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

Answer 1

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

Answer 2

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.