Q:

React JS error: this.state.data.map is not a function

I am new to React and this threw up while trying to map some data from API. I have set the state to an array but still this error comes up. 
import React, { Component } from 'react';
import axios from 'axios';

class Test extends Component {
    state = {
        articles: [],
    }
    componentDidMount() {
        axios.get('https://newsapi.org/v2/top-headlines?country=us&apiKey=ef678d80cc70495184c2bf95d4576c9b')
            .then(response => {
                const articles = response.data;
                this.setState({ articles });
            })
    }

    render() {
        return (
            <div>
           <ul>
            {this.state.articles.map(article => <li><a href={`${article.url}`}>{article.title}</a></li>)}
           </ul>
       </div>
        )
    }
}

export default Test;

A:

Try changing 
const articles = response.data;

to 
const articles = response.data.articles;

Its because the api returns an JSON Output with response in articles key. 

