Array becoming object when stored in state in react

Question

I am getting some data from my api. In the callback from fetching the data, the data is an array:

const classes = useStyles();

const [posts, setPosts] = useState([]);

useEffect(() => {
    fetch('https://forum-temp.herokuapp.com/api/posts')
        .then((res) => res.json())
        .then((res) => {
            console.log(typeof res.data.docs) // Array
            setPosts(res.data.docs);
        });
}, []);

Inside the return statement of my functional component -

<div className="post__container">
                    { {posts.map((post, i) => (
                        <MiniPost
                            dp="https://picsum.photos/200"
                            username="blah"
                            time="blah"
                            heading="blah"
                            comments="4"
                            history={history}
                            key={i}
                        />
                    ))} }
    </div>

Praveen Kumar Purushothaman · Accepted Answer · 2020-11-19 09:52:17Z

2

It's because you're double wrapping. React uses only single wrapping. Use only one set of {} like this {posts.map( ... )}:

<div className="post__container">
  {posts.map((post, i) => (
    <MiniPost
      dp="https://picsum.photos/200"
      username="blah"
      time="blah"
      heading="blah"
      comments="4"
      history={history}
      key={i}
    />
  ))}
</div>

answered Nov 19, 2020 at 9:52

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

2 Comments

Akash Over a year ago

Yah sure, I wanted to do it immediately but it asked to wait for a few minutes so sorry for the delay

Praveen Kumar Purushothaman Over a year ago

@Akash Thanks again. Have a nice day! 😁

Collectives™ on Stack Overflow

Array becoming object when stored in state in react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related