Trouble mapping an Array of data to Images in React

Question

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".

Please edit your question to show where theLinks is defined and assigned data. — Phil
– Phil, Commented Jun 5, 2022 at 23:12

omar · Accepted Answer · 2022-06-06 00:41:35Z

2

make sure to add your mapped array theLinks after or inside a return function,
for example, 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}
        />
  ))}
}

SOLUTION 1
this will work (renders the mapped array and other elements too):

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 (
    <>
      <h1> thanks Phil for your suggestion! </h1>
      {theLinks.map((item, indx) => (
        <img
          style={{ width: "50%", border: "1px solid #ccc" }}
          key={indx}
          src={item.src}
          alt={item.label}
        />
      ))}
      ;
    </>
  );
}

SOLUTION 2
this will work (renders only the mapped array)

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

edited Jun 6, 2022 at 0:41

answered Jun 5, 2022 at 23:10

omar

5363 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

omar Over a year ago

codesandbox.io/s/thelinks-x6h5pk?file=/src/App.js check this out to understand what i mean it has to be inside a return function

Phil Over a year ago

The React fragment (<> ... </>) is redundant

omar Over a year ago

@Phil thanks for your comment, i did some edits and explained why React fragment might be useful :)

Vishwaraj Kamble · Accepted Answer · 2022-06-05 23:09:32Z

-1

Try this

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

answered Jun 5, 2022 at 23:09

Vishwaraj Kamble

1

2 Comments

Jack Bashford Over a year ago

It's an arrow function so it returns by default unless it encounters a {, and he used { to wrap so an explicit return is not needed.

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Trouble mapping an Array of data to Images in React

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related