score:1

Accepted answer
import React, {Component} from 'react'
import axios from 'axios'

class App extends Component {

  state = {
    fact:''
  }

  handleonClick = () => {
    axios.get('https://api.chucknorris.io/jokes/random')
    .then(res => {

      console.log(res.data.value)
      this.setState({

        fact: res.data.value
      })
    })
  }
  
  componentDidMount(){
    axios.get('https://api.chucknorris.io/jokes/random')
    .then(res => {

      console.log(res.data.value)
      this.setState({

        fact: res.data.value
      })
    })
  }

  render(){
    return(
      <div>
        <h1 class='title'>Chuck Noris facts</h1>
        <p>{this.state.fact}</p>
        <br/>
        <button className='fact-btn' onClick={this.handleonClick}>New Fact</button>
      </div>
    )
  }
}

export default App;

score:0

quote: res.value

score:1

getNewFact = () => {
axios.get('https://api.chucknorris.io/jokes/random')
  .then(res => {
    console.log('response', res.data.value)
    this.setState({
    quote: res.data.value // also fix this or nothing will show after clicking the button
  })
})

Related Query

More Query from same tag