reactjs - Axios gets undefined

Question

I have React component FetchQoute which is supposed to get response from the provided URL, but it shows undefined instead ?

class FetchQuote extends Component {
  constructor(props) {
    super(props);    
    this.state = {
      jokes: []
    };    
  }

  componentDidMount() {
    console.log(res.value); //undefined
    axios.get('https://api.icndb.com/jokes/random')
      .then((res) => {       
        this.setState({data:res.value.joke});//error TypeError: Cannot read property 'joke' of undefined
      })

  }

}

That URL can be easily tested in browser to return JSON data correctly, including res.value.joke

Answer 1

What's the JSON response look like in the browser? axios returns response data under the data attribute.

For example if your JSON response looks like:

{ "value": 
    { "joke": "lol"} 
}

Then you would access it like

axios.get('https://api.icndb.com/jokes/random')
      .then((response) => {       
        console.log(response.data.value.joke);
      })