Unable to map over result of async fetch request in React Hook

Question

I've found quite a few issues related to this but I don't seem to be able to find a solution that works and I'm not sure why.

I have a async fetch request in a react functional component. It returns some dummy JSON data, which I then want to map over.

Everything is returned correctly in the console.log (and in Postman), however when it comes to mapping the result I get

TypeError: Cannot read property 'map' of undefined

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

function App() {
  const [dummyData, setDummyData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setDummyData(data);
      });
  }, []);

  return (
    <div className="App">
      {console.log(dummyData)}

      {dummyData.map((d) => {
        return <h1> {d}</h1>;
      })}
    </div>
  );
}

export default App;

Can anyone help me understand why? I feel there may be some fundamental gaps in my knowledge on this?? Or am I missing something simple?

Adding a codesandbox to demo and initialising the state of dummyData

https://codesandbox.io/s/objective-benz-t1zpi?file=/src/App.js

`dummyData && dummyData.map(...)` that's all you need. – ulou Jun 06 '21 at 18:27 — ulou, Jun 06 '21 at 18:27

Naren · Accepted Answer · 2021-06-06T17:40:54.443

https://jsonplaceholder.typicode.com/todos/1 returns an Object, Not an Array. dummyData is replaced with Object(once you receive response) which does not have array methods. That's why you're getting error.

I think you need this https://jsonplaceholder.typicode.com/todos.

 import React, { useState, useEffect } from "react";

function App() {
  const [dummyData, setDummyData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setDummyData(data);
      });
  }, []);

  return (
    <div className="App">
      {dummyData.map((d) => {
        return (
          <h1>
            {d.id} - {d.title}
          </h1>
        );
      })}
    </div>
  );
}

export default App;

Demo

score 0 · Answer 2 · answered Jun 06 '21 at 17:30

0

You have not initiaized the state - dummyData

Change the state declaration to:

const [dummyData, setDummyData] = useState([]);

answered Jun 06 '21 at 17:30

Aniket Kolekar

383
6
19

Thanks! I've updated this but still getting the same error? – LAT89 Jun 06 '21 at 17:32
Can you please send the response received from the API. – Aniket Kolekar Jun 06 '21 at 17:58

Unable to map over result of async fetch request in React Hook

2 Answers2