React component does not load inside map loop

Question

I was building a react app and got stuck at this issue where my component does not load in the case of a loop. Below is my code for StoriesContainer.js and Story.js. As you will notice I am calling the Story component twice, the first call is outside the loop and that renders perfectly. However, my second call is inside the map loop and that does not seem to work. I am confused about what I might be doing wrong since I tried to look it up online and this was the correct way to do it.

If anyone can help that would be great. The image the result I get right now.

import React, { useState, useEffect } from "react";
import { getStoryID } from "../services/api";
import { Story } from "./Story";

export const StoriesContainer = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    getStoryID().then((data) => {
      console.log(data);
      setData(data);
    });
  }, []);

  return (
    <>
      <Story id={95666} />
      <h1>App.js</h1>
      <ul>
        {data.map((id) => {
          // eslint-disable-next-line no-lone-blocks
          {
            console.log(id);
          }
          <Story key={id} id={id} />;
        })}
      </ul>
    </>
  );
};

export const Story = ({ id }) => {
  
  return <h1>This is story {id}</h1>;
};

it's a typo, your map callback has no return statement

Krzysztof Krzeszewski
– Krzysztof Krzeszewski

2021-01-13 12:44:28 +00:00
Commented Jan 13, 2021 at 12:44 — Krzysztof Krzeszewski
– Krzysztof Krzeszewski, Commented Jan 13, 2021 at 12:44

Sudhanshu Rai · Accepted Answer · 2021-01-13 12:45:42Z

2

You're not returning from your map callback.

  <ul>
    {data.map((id) => {
      // eslint-disable-next-line no-lone-blocks
      {
        console.log(id);
      }
      return <Story key={id} id={id} />;
    })}
  </ul>

or simply

  <ul>
    {data.map((id) => <Story key={id} id={id} />}
  </ul>

Both will be fine and I will prefer the second one.

answered Jan 13, 2021 at 12:45

Sudhanshu Rai

2,0691 gold badge11 silver badges21 bronze badges

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

2 Comments

TanDev Over a year ago

Wow. Cant believe it was that simple. A follow question: Why does a forEach not work and a map does?

Sudhanshu Rai Over a year ago

forEach just loops over your array, it does not return anything, you can't, map returns an array, an array of story components, you can mark the question as answered if your problem was solved

Sulav Sapkota · Accepted Answer · 2021-01-13 12:46:00Z

1

use the return keyword before <Story> in the map.

answered Jan 13, 2021 at 12:46

Sulav Sapkota

861 silver badge10 bronze badges

Collectives™ on Stack Overflow

React component does not load inside map loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related