Reading JSON data with axios and React

Question

So I created this backend json response.

{
    "places": [
        {
            "location": {
                "lat": 40.3714624,
                "lng": 21.7614661
            },
            "_id": "5f9bb2ff4fc07350c317500c",
            "title": "Alcazar Park",
            "description": "A lovely park.",
            "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Empire_State_Building_%28aerial_view%29.jpg/400px-Empire_State_Building_%28aerial_view%29.jpg",
            "creator": "5f9bb2ee4fc07350c317500b",
            "__v": 0,
            "id": "5f9bb2ff4fc07350c317500c"
        },
        {
            "location": {
                "lat": 40.3714624,
                "lng": 21.7614661
            },
            "_id": "5f9bb4f9d92cd5541f5922fc",
            "title": "Alcazar Park",
            "description": "A beautiful park.",
            "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Empire_State_Building_%28aerial_view%29.jpg/400px-Empire_State_Building_%28aerial_view%29.jpg",
            "creator": "5f9bb2ee4fc07350c317500b",
            "__v": 0,
            "id": "5f9bb4f9d92cd5541f5922fc"
        },
        {
            "location": {
                "lat": 40.3714624,
                "lng": 21.7614661
            },
            "_id": "5f9bb632d92cd5541f5922fd",
            "title": "Train station of Larisa",
            "description": "An old but cool train station",
            "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Empire_State_Building_%28aerial_view%29.jpg/400px-Empire_State_Building_%28aerial_view%29.jpg",
            "creator": "5f9bb2ee4fc07350c317500b",
            "__v": 0,
            "id": "5f9bb632d92cd5541f5922fd"
        }
    ]
}

Now I want to display in a list just the title of each place in the array. Here is my code for that in React

const DataFetching = () => {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        axios
        .get('http://localhost:5000/api/places/user/5f9bb2ee4fc07350c317500b')
        .then(res => {
            console.log(res)
            setPosts(res.data);
        })
        .catch((err) => {
            console.log(err)
        })
    }, []);

    return(
        <div>
            <ul>
                {
                    posts.map(post => <li key={post.id}>{post.title}</li>)
                }
            </ul>
        </div>
    )
}

export default DataFetching;

However, I am getting this error

How can I fix it?

TypeError: posts.map is not a function

Thanks, Theo

Check if res.data is an array or not, error message suggests that its not. — Yousaf
– Yousaf, Commented Oct 31, 2020 at 13:48
return <></> if posts is not an array. Maybe no data is being fetched from the API and posts is undefined — Ozgur Sar
– Ozgur Sar, Commented Oct 31, 2020 at 13:55

Jackkobec · Accepted Answer · 2020-10-31 14:00:02Z

3

Try this:

setPosts(res.data.places)


posts?.map(post => <li key={post.id}>{post.title}

or:

setPosts(res.data)


posts.places?.map(post => <li key={post.id}>{post.title}

edited Oct 31, 2020 at 14:00

answered Oct 31, 2020 at 13:50

Jackkobec

6,9871 gold badge42 silver badges39 bronze badges

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

4 Comments

Yousaf Over a year ago

Optional-chaining will not prevent the error because OP is incorrectly setting the state to an object instead of an array. Optional-chaining will only help if posts is undefined.

Jackkobec Over a year ago

What's about this: setPosts(res.data.places)?

Yousaf Over a year ago

Yes that is the correct way to update the state in this case. You don't need optional-chaining here because initial value of places is an empty array. Would be nice if you add an explanation of what OP did wrong and why your answer will work.

Jackkobec Over a year ago

True think the better way is: setPosts(res.data) adn use it in render: posts.places?.map(post => <li key={post.id}>{post.title}

Collectives™ on Stack Overflow

Reading JSON data with axios and React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related