我收到此错误“未捕获错误：对象作为 React 子项无效”，即使我使用了对象数组怎么办

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.