TypeError: posts.map is not a function in Reactjs while fetching data from an API using useEffect hook

Question

I am getting the below error enter image description here

import React ,{useState,useEffect} from 'react'; import axios from 'axios';

function DataFetching() {

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

useEffect(()=>{

    axios.get('https://reqres.in/api/users')
    .then(res=>{

        console.log(res)
        setPosts(res.data)
    })
    .catch(err=>
        console.log(err) )

},[])
return (
    <div>
      
        <ul>
            {
          **  posts.map(post=><li key={post.id}>{post.email}</li>)**
            }
        </ul>
        
    </div>
);

}

export default DataFetching;

Data is successfully store in hook but map function getting an error: Posts.map is not a function

I have tried Object.values(posts).map but it is not working

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community
– Community Bot, Commented Nov 9, 2023 at 17:41

Saidamir · Accepted Answer · 2023-11-09 14:11:30Z

1

Maybe try to implement your data fetching as below. Hope it works.

  useEffect(() => {

    const fetchData = async () => {
      try {
        const response = await axios.get('https://reqres.in/api/users');
        if (response.status === 200) {
          const data = response.data;
          console.log(data);
          setPosts(data);
        } else {
          throw new Error('Network error occured.');
        }
      } catch (error) {
        console.error('Error occured while fetching data: ', error);
      }
    };

    fetchData();
  }, []);

StackBlitz example

edited Nov 9, 2023 at 14:11

answered Nov 9, 2023 at 14:06

Saidamir

3283 silver badges19 bronze badges

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

1 Comment

Sajitha Anu Over a year ago

Thank you for your response. I have tried as suggested. but it doesn't work. It shows 'The above error occurred in <DataFetching>' component. But no details about the error

Cody · Accepted Answer · 2024-07-07 23:11:58Z

0

You are getting a successful fetch result in the front end. However, res.data is not an array. Hence, the error message states .map is not a function (even though it is a prototype method on array type).

You need to console.log res.data and view the data type and verify the responses is an array.

Common cause would be forgetting to call .json() on the return json response.

answered Jul 7, 2024 at 23:11

Cody

563 bronze badges

Collectives™ on Stack Overflow

TypeError: posts.map is not a function in Reactjs while fetching data from an API using useEffect hook

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related