0

Here's my code:

useEffect(() => {
    fetchPosts()
}, [])

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

const fetchPosts = async () => {
    const data = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
    const posts_data = await data.json()    
    setPosts(posts_data)
    console.log(posts)    
}

From the console.log(posts) it says [] with a length: 0 inside. However when I console log posts_data it then gives me all the posts I got from that api call. Is the setPosts not working?

UPDATE

I even added:

<div className="container-fluid mt-3">
    <h1 className="text-white">Posts</h1>
    {posts.map(post => {
        <p>asdasd</p>
    })}
</div>

And it doesn't display anything.

Dran Dev
  • 529
  • 3
  • 20
  • Also see [this answer](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately/54069332#54069332). – Brian Thompson Nov 10 '20 at 17:46
  • 1
    `setPosts` doesn't change `posts`. It changes **state** (asynchronously). That causes your component function to be called again, and the new `posts` that you get from `useState` will be the ones from `fetchPosts`. If you render `posts`, you'll render first the empty set of posts (because both `fetch` and `setPosts` are asynchronous), and then your component will be called again to render the fetched posts. Which is all normal. If you want the component never to render an empty list of posts, fetch the posts in the parent component and pass them to this component in props instead. – T.J. Crowder Nov 10 '20 at 17:47
  • To answer your update, you must return the JSX from the `map` callback in order for it to show up. Either by the `return` keyword or using an implicit return (`post =>

    something

    `).
    – Brian Thompson Nov 10 '20 at 17:48
  • I have updated my question. Currently I'm looking at the given feedbacks. – Dran Dev Nov 10 '20 at 17:48
  • Open this question or ask the same question again. I am providing you the solution of your UPDATE problem. – Ravi Garg Nov 10 '20 at 17:55
  • @spycbanda Here I created a new question as you suggested: https://stackoverflow.com/questions/64774309/usestate-async-problem-not-updating-saving – Dran Dev Nov 10 '20 at 18:02
  • @T.J.Crowder I created a new question as one of the users suggested: https://stackoverflow.com/questions/64774309/usestate-async-problem-not-updating-saving – Dran Dev Nov 10 '20 at 18:02
  • @T.J.Crowder I transferred the fetch in the parent component and passed it on the posts.js component as props but now it's giving me an error saying `cannot read map of undefined` – Dran Dev Nov 10 '20 at 18:03
  • 1
    @spycbanda - Please don't suggest people repost questions that have been correctly closed, as this one has. Reposting questions is **very** much not okay here on SO. Editing and asking people to reopen is. – T.J. Crowder Nov 10 '20 at 18:18
  • 1
    @DranDev - The point of moving the fetch to the parent is to not render the child at all before the fetch is complete. I haven't used react-router in a while, but don't you have to tell it what props to pass on? It sounds like the route isn't passing `posts` on to the child. But again, the point of moving it (if you do) is to not render the child until you have the data. If it's okay for the child to render empty while you're fetching the data, you can leave the fetch in the child. – T.J. Crowder Nov 10 '20 at 18:19
  • 1
    @spycbanda - *"Open this question or ask the same question again."* If there's a difference of significance, then it's not the same question; but there you're clearly telling the OP to break SO's rules. Passing props incorrectly? Also covered elsewhere. It's great to help folks! Sometimes, though, we do it in comments because they're having trouble understanding what's already covered on the site. – T.J. Crowder Nov 10 '20 at 18:24

0 Answers0