How to make an AJAX request in ReactJS

A walked-through example of using the fetch API in React.

5 min readJan 28, 2018

I will preface this post by saying that I am a beginner and this post is written for beginners. I hope there are no glaring errors but if there are let me know! (Also this tutorial is probably like 10x more entertaining if you like Parks and Rec)

Going forward I am assuming you are familiar with the basics of Postman and the create-react-app node package. If you’re not then no worries! You can download Postman here: https://www.getpostman.com/ and read the create-react-app docs here: https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started.

So let’s get started! Get a new React app up and running locally. We will be making a fetch request to this cool Ron Swanson API I found: https://github.com/jamesseanwright/ron-swanson-quotes (you gotta love Ron!) and then displaying the results on screen with React.

1. Creating a blank canvas

The first time you load your create-react-app you will see that it comes with some default elements and styling. We will delete everything in the App component’s render function apart from the div with className: “App”. In the corresponding CSS file you can delete everything if you wish, I have chosen to keep any text in App aligned to the centre.

Also remember to delete any attempts to import the logo.svg and any mentions of registerServiceWorker in index.js as it is unnecessary here. If you compile now you should see a blank screen.

Just to make sure we’re on the same page here are some screenshots of where we should be starting from.

2. Create a button that will execute the fetch request on click.

We add a button with an onClick attribute and an empty method which will handle the button click

In our App component we want to render a button which will display a random quote every time it is clicked. To do this we write a method called handleBtnClick which we will leave empty for the meantime - this is where our fetch request will take place. Remember to bind your function in the constructor to ensure this refers to this specific component. If you save your changes you should now see a button in your browser:

3. Let’s check Postman!

Postman is a great tool when you’re working with APIs. To check that everything is working properly we can make a GET request to http://ron-swanson-quotes.herokuapp.com/v2/quotes. Whilst the data we’re dealing with here is very simple in other cases the data could be very complicated and it’s crucial you understand the format of what you get back from an AJAX request.

We can see that the data we get back is an array containing a single string.

We can use Postman to make a GET request to the API to check it works.

4. Writing the fetch request

We initialise our state, write our fetch request and display the quote on the screen

Let’s talk about the initial state first. In the constructor we set the state of ‘quote’ to be an empty string. This is because further down in the render method we are accessing the value of the current state in a paragraph tag. Seeing as our fetch request executes on the click of a button and not as soon as the page loads we will throw an error if we try to read the property ‘quote’ of a null state. This is why we set the initial state to be an empty string.

The fetch API takes in one mandatory argument — the path to the resource you want to fetch. By default, a fetch request is a get request and returns a promise which is why we use ‘then’. So once the promise has been resolved and data has been returned to us, we grab the results JSON. We want to do something with the data we get back - the quote is stored in an array (which we can access using data[0]) so let’s store this in a variable.

So what now? We have a variable which contains our quote and we have a way to display a quote on the screen using this.state.quote in our render() method. We just need to update the state of our App component to include the new quote we have fetched. We use this.setState() to achieve this. Note that {quote} is ES6 and is the same as writing {quote: quote}. If you check your browser you should see a quote!

5. Add a picture and styling

Whilst not necessary to the functionality it’s always nice to add a heading and some styling to make any little apps you develop more aesthetically pleasing.