Received a TypeError: Cannot read property 'map' of undefined in React

Question

I've made a GET request to the News API and received data as an object. Since the map method can only work on an array, I then use map on data.articles as it's an array. (checked in the console log on Line 22).

With that said, I don't understand why I'm still receiving

TypeError Cannot read property 'map' of undefined

https://codesandbox.io/s/elated-star-j9s8g?file=/src/App.js

function App() {
  const [apiUrl] = useState("https://gnews.io/api/v3/search?");
  const [apiKey] = useState("123456789");
  const [data, setData] = useState([]);
  const [query, setQuery] = useState("");
  const [url, setUrl] = useState(
    `https://gnews.io/api/v3/top-news?token=95e7679f627d5796aa24f6692def5df3`
  );

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(url);
      setData(result.data);
    };
    fetchData();
  }, [url]);

  const searchHandler = () => {
    setUrl(`${apiUrl}q=${query}&token=${apiKey}`);
    console.log(data.articles);
  };

  let newsNodes = data.articles.map((item) => {
    return (
      <li key={item.publishedAt}>
        <a href={item.url}>{item.title}</a>
      </li>
    );
  });

  return (
    <>
      <input
        type="text"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
      />
      <button type="button" onClick={searchHandler}>
        Search
      </button>
      <ul>{newsNodes}</ul>
    </>
  );
}

This should help you - stackoverflow.com/a/49477641/4160532. Your initial value to useState is set to []. — Kedarnag Mukanahallipatna
The API hasn't returned by the time you're calling map, it's a race condition. Either set it to an empty array initially, or wait for data before calling map. — Detail

95faf8e76605e973 95faf8e76605e973 · Accepted Answer · 2020-09-07T23:40:02

As stated by the others, when the component is initally rendered, data.articles is undefined. This is evident if you log the data before map

You could probably have a condition that checks to see if it is not undefined, only then will you proceed with map

let newsNodes = data.articles && data.articles.map((item) => {
  return (
    <li key={item.publishedAt}>
      <a href={item.url}>{item.title}</a>
    </li>
  );
});

Received a TypeError: Cannot read property 'map' of undefined in React

2 Answers