Trying to get fetch to happen in React
When I first tried to incorporate APIs into a React app, I was confused about involving state and actually rendering the data I wanted. So I was basically left wondering, how to make fetch happen.
The first thing to consider is, what is a fetch request?
Simply, a fetch request is how to request data from an API (third-party or our own). This request is “asking” the API for data and the server then “promises ”to send the data over. Most data for APIs are stored/sent in JSON format, reducing the number of errors from using different formats.
So in JS, you would make a fetch request as seen below, with the document.getElementById used to render the information on the screen. We will be using a Simpsons API throughout, that has random quotes from characters as well as images.
With React, making dynamic pages is a lot easier thanks to state. In this example, a fetch request to the API will be made and the response will be stored in state. In the React app, a Profile component has been made and this is where we will be doing our fetch request.
Step 1: Set up the Profile Component with a constructor
In the constructor, it is important to introduce state. This will allow us to pull our data from the API into state. Therefore, the initial state of the Simpsons Data should be empty.
Step 2: The Fetch Request
React has lifecycle methods including componentWillMount(). This method runs after the output has been rendered to the DOM. Our fetch request should be placed in here so that when the app loads, our data is rendered. For this example, I have used async/await to add some syntactical sugar. Feel free to stick with the standard promise method. In this fetch request, data from our API is obtained and setting the state of simpsonsData empty array is now filled with our fetched data.
Step 3: Rendering the data on the screen
By looking on the API docs and/or console logging the data, you can see that from the data fetched from the Simpsons API a character name, quote and image can be pulled out and displayed in our render method. Before the return, the data has been destructured just to make it easier to follow and of course, reduce our typing! YAY! In the return, the information is now dynamically inserted within our render method.
Our React app should look something like this:
The Profile component code should look something like this at the end:
So to conclude, making fetch happen in React is not that bad after all. By utilising state, our obtained data can be gathered into state allowing us to pull out the information and render it on the screen. Hopefully this will help with fetch requests in the future and you’ll do better than these dogs below 😊
