Store api response to an array using react useState

Question

I am new to react hooks. I am trying to cast API response into an array using react useState hook. It's giving me empty with the below approach

const [post, setPostArray] = useState([]);

useEffect(() => {
  const postparams = { userList: result };
  axios
    .get(environment._urlPosts, { headers, params: postparams })
    .then(posts => {
      // storing response data in array
      setPostArray(posts.data.post);

      console.log(post);
    })
    .catch(err => {});
}, []);

Then I used the below approach and I was able to see data is printing in the console log

axios.get(environment._urlPosts, { headers, params: postparams }).then(posts => {
  // storing response data in array
  for (let obj of posts.data.post) {
      post.push(obj)
  }
  setPostArray(post)
  console.log(post)

But when I try to iterate this post array in my JSX, it's giving me empty array.

  </div>
{/* array length */}
        {post.length}

        {post.map(post =>
            <div className="card">
                <Post username={post.username} fullname={post.fullname} postedTime={post.postedTime} postContent='Hi' tweeterLike={post.tweeterLike} />
            </div>
        )}

Can you please help me to resolve this?

Since setState work like an async function you will not get the post state right after your set it. but you should be able to get that in the JSX — Muhammad Haseeb
– Muhammad Haseeb, Commented Mar 22, 2020 at 9:51
Actually ur 1st comment resolved my problem. But anyway I accepted the provided answer also :) — Purni
– Purni, Commented Mar 22, 2020 at 14:55

Muhammad Haseeb · Accepted Answer · 2020-03-22 09:57:24Z

4

Here is a minimal Example of what you are trying to achieve. This is the working code:

import React, {useEffect, useState} from "react";
import "./styles.css";

export default function App() {
  const [post, setPostArray] = useState([])

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => {
      console.log(json);
      setPostArray([json]);
  })
    //  setPostArray([{name: 'a'}, {name: 'b'},{name: 'c'}])
},[])

console.log(post)
  return (
    <div className="App">
      {
        post.map(item => <div>{item.title} </div>)
      }
    </div>
  );
}

Here is the link to the example in codeSandBox: https://codesandbox.io/s/jovial-snow-773kp

answered Mar 22, 2020 at 9:57

Muhammad Haseeb

1,3611 gold badge12 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Store api response to an array using react useState

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related