title: Received a TypeError: Cannot read property 'map' of undefined in React
body: <p>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 <code>data.articles</code> as it's an array. (checked in the console log on Line 22).</p>
  <p>With that said, I don't understand why I'm still receiving</p>
  <blockquote>
  <p>TypeError Cannot read property 'map' of undefined</p>
  </blockquote>
  <p><a href="https://codesandbox.io/s/elated-star-j9s8g?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/elated-star-j9s8g?file=/src/App.js</a></p>
  <pre><code>function App() {
    const [apiUrl] = useState(&quot;https://gnews.io/api/v3/search?&quot;);
    const [apiKey] = useState(&quot;123456789&quot;);
    const [data, setData] = useState([]);
    const [query, setQuery] = useState(&quot;&quot;);
    const [url, setUrl] = useState(
      `https://gnews.io/api/v3/top-news?token=95e7679f627d5796aa24f6692def5df3`
    );
  
    useEffect(() =&gt; {
      const fetchData = async () =&gt; {
        const result = await axios(url);
        setData(result.data);
      };
      fetchData();
    }, [url]);
  
    const searchHandler = () =&gt; {
      setUrl(`${apiUrl}q=${query}&amp;token=${apiKey}`);
      console.log(data.articles);
    };
  
    let newsNodes = data.articles.map((item) =&gt; {
      return (
        &lt;li key={item.publishedAt}&gt;
          &lt;a href={item.url}&gt;{item.title}&lt;/a&gt;
        &lt;/li&gt;
      );
    });
  
    return (
      &lt;&gt;
        &lt;input
          type=&quot;text&quot;
          value={query}
          onChange={(event) =&gt; setQuery(event.target.value)}
        /&gt;
        &lt;button type=&quot;button&quot; onClick={searchHandler}&gt;
          Search
        &lt;/button&gt;
        &lt;ul&gt;{newsNodes}&lt;/ul&gt;
      &lt;/&gt;
    );
  }
  </code></pre>