Trouble mapping an Array of data to Images in React

June 6, 2022

I have a map that looks like this

I am using .map() to try to produce them as images like so:

{theLinks.map((item, indx) => (
  <img key={indx} src={item.src} alt={item.label} />
))}

Nothing is getting returned, if I mess with it I can get a single img to return with no valid source and the alt is "unknown".

>Solution :

this will not work

export default function App() {
  const theLinks = [
    { lable: "Daily Mix", src: "https://flif.info/example-images/fish.png" },
    { lable: "Legit", src: "https://flif.info/example-images/fish.png" },
    { lable: "SCL", src: "https://flif.info/example-images/fish.png" }
  ];

  {theLinks.map((item, indx) => (
        <img
          style={{ width: "50%", border: "1px solid #ccc" }}
          key={indx}
          src={item.src}
          alt={item.label}
        />
  ))}
}

this will work

export default function App() {
  const theLinks = [
    { lable: "Daily Mix", src: "https://flif.info/example-images/fish.png" },
    { lable: "Legit", src: "https://flif.info/example-images/fish.png" },
    { lable: "SCL", src: "https://flif.info/example-images/fish.png" }
  ];

  return (
    <>
      {theLinks.map((item, indx) => (
        <img
          style={{ width: "50%", border: "1px solid #ccc" }}
          key={indx}
          src={item.src}
          alt={item.label}
        />
      ))}
      ;
    </>
  );
}