Chuck Norris Fact Generator with Axios and React

Every human deserves a daily dose of Chuck Norris facts- we’ll use Axios and the Chuck Norris Facts API by Mathias Schilling to built a Chuck Norris Fact Generator.

Axios makes it easy to fetch data- let’s put this together in CodePen using React and Bootstrap. If you don’t know how to configure CodePen for React, check out this story.

Once you have your pen up, add this to your JS file:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fact: 'Chuck Norris can text using his walkie talkie and without batteries.'
    };
  }
  
  render() {
    return(
      <div className="container text-center">
        <h1>Chuck Norris Facts</h1>
        <h3>{'"' + this.state.fact + '"'}</h3>
        <button type="button" 
          className="btn btn-primary">
          More Chuck Facts!
        </button>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

And add this touch in your CSS for spacing:

.container {
  margin-top: 32px;
}

Your CodePen should look like this:

https://codepen.io/trey-davis/pen/qPOgmX

Nothing special here, just a quick layout for rendering our Chuck Facts. So far we have a static page, let’s make it dynamic by pulling random Chuck Norris facts from the Chuck Norris API (thanks to @MatChilling for this API).

We are going to use Axios to pull the data from the Chuck Norris API. Axios makes it easy to send get and post requests. You can dive more into Axios here.

Pull Axios into your CodePen by adding the content delivery network link to the JS settings page.

Now that we have Axios being pulled into our pen, let’s declare the our getFact function that will fetch random facts from the Chuck Norris API. Add the following to your constructor:

this.getFact = this.getFact.bind(this);

Now let’s add our logic to request the Chuck Norris fact using Axios.

  getFact() {
    axios.get('https://api.chucknorris.io/jokes/random')
      .then(response => {
      this.setState({fact: response.data.value});
    }).catch(error => {
      console.log(error);
    });
  }

To make a get request with Axios, we use ‘axios.get’ and then pass the url for the request. Axios is promise-based, so we will respond with the data/error using then/catch.

In our ‘then’ function, we will take the response and access the API data using response.data. According to the Chuck Norris API, we access the random fact via the value attribute, so we will use response.data.value.

After accessing the random fact we will call setState to update the ‘fact’ state to reflect the new random fact.

Let’s tie this up by passing the ‘getFact’ method to our button using the ‘onClick’ React event. Add this to the button:

onClick={this.getFact}

Now your code should look like this:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fact: 'Chuck Norris can text using his walkie talkie and without batteries.'
    };
    
    this.getFact = this.getFact.bind(this);
  }
  
  getFact() {
    axios.get('https://api.chucknorris.io/jokes/random')
      .then(response => {
      this.setState({fact: response.data.value});
    }).catch(error => {
      console.log(error);
    });
  }
  
  render() {
    return(
      <div className="container text-center">
        <h1>Chuck Norris Facts</h1>
        <h3>{'"' + this.state.fact + '"'}</h3>
        <button type="button" 
          className="btn btn-primary"
          onClick={this.getFact}>
          More Chuck Facts!
        </button>
      </div>
    );
  }
}

And now you can request new Chuck Norris facts by selecting the button:

You can check out the CodePen here.

Let’s break down the flow for requesting a new random fact.

So far we’ve been building React apps using CodePen- next we’ll build and run a React app using the create-react-app NPM package.

If you liked that post subscribe to Byte-sized React’s weekly newsletter to receive weekly React tips and tutorials right in your inbox.