React JS. How can I display the image inside the object?

Question

How can I display the image inside the object in React.js?

const Area = () =>{ 
 const flags = [
    { id: 1, name: "USA", image: "./us.png" },
    { id: 2, name: "Canada", image: "./ca.png" },
  ];

return (
    <div>
      {flags.map((area) => {
        return <img key={area.id} src={area.image} />;
      })}
    </div>
)}

Answer 1

You can use require for images inside an object.But your code works fine even without that you just have to return it inside return method().

  const Area = () =>{ 
  const flags = [
    { id: 1, name: "USA", image: require('./us.png') },
    { id: 2, name: "Canada", image: require('./ca.png') },
   ]

  return (
      <div>
          {flags.map((area) => 
          <img key={area.id} src={area.image} />
    )}
     </div>
   )
   }
   return(
   Area()
   ) 

It works fine this way as well

const Area = () =>{ 
const flags = [
  { id: 1, name: "USA", image: "./us.png" },
  { id: 2, name: "Canada", image: "./ca.png" },
]

return (
  <div>
    {flags.map((area) => 
     <img key={area.id} src={area.image} />
    )}
  </div>
 )
}
return(
Area()
 )