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
– Kedarnag Mukanahallipatna, Commented Sep 7, 2020 at 23:07
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
– Detail, Commented Sep 7, 2020 at 23:08

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

1

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>
  );
});

answered Sep 7, 2020 at 23:40

95faf8e76605e973

14.3k4 gold badges30 silver badges56 bronze badges

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

1 Comment

ln09nv2 Over a year ago

Putting this in my notes for future reference. Appreciate it!

Lionel Rowe · Accepted Answer · 2020-09-07 23:02:45Z

1

In the initial value passed to useState, you initialize data to [], and [].articles is undefined.

answered Sep 7, 2020 at 23:02

Lionel Rowe

6,2581 gold badge19 silver badges35 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related