Learn Fetch API with React Hooks By Building a simple application
In this article I am going to use the Fetch method to get data from APIs by building a simple and beginner friendly React app . You can find the link to the API source here.
Hooks let us use state and other React features without writing a class. useState is a Hook that lets you add React state to function components. useEffect is another React hook which tells React that the component needs to do something after rendering so React will remember this function and call it later.
To start, we need to create a React app with the create-react-app command. (I assume you have already installed Node.js so we can use npm to start the application). Go to your working folder and run:
Change directory to the app folder which you just created above with cd cat-facts command. Open the project in your code editor (I am using VScode). Delete some of the files and sections such as logo and original returned values in App.js:
Our project folder and files are ready now to run the Cat Facts react application with the “npm start” command.
Go back to your code editor and create a “components” folder inside the src folder. It is best practice to have your component files in one place.
Create a JavaScript file inside the components folder (note: files inside the components folder always start with an Uppercase letter), I will call it CatFacts.js.
This is our main component which will be imported into App.js and will be rendered from there, for this we need to export the function first.
We are going to use React Hooks t. Hooks are React’s new feature allowing you to use state and other React features without writing a class. To start import React, useState and useEffect on top of this file.
Create another function inside the main CatFacts function and call it fetchData. This function will be asynchronous so we can await to get the response after fetching the data from API and assign it to a variable called response (you can call it whatever you like).
If we log the response into the console we will see that the response data are in the form of an object but we need the data in the form of json, therefore to convert it to json we will call a json function on the response and assign the result to the variable data (you can call it whatever you like):
Then we will call the fetchData function in a useEffect hook. This hook takes two arguments, the first one is our fetchData function and second is an empty array which lets the hook to render once. If we don’t pass this empty useEffect might render two times or more(read more about this here.
In the fetchData function we create a state variable and set it to useState. useState allows us to add state to a functional component. It returns an array, where the first element is the state variable(“facts” in our app) and the second element is a function to update the value of the variable (“setFacts” in our example).
We will use the facts in our UI and setFacts will be used to update the state of the data gotten from the API.
To observe the fetched data on UI, create a div containing two elements in the return statement. The first element is a paragraph which renders the API data into the UI when we click a button. The onClick event triggers the fetchData function and generate Cat Facts everytime we click the button.
The final code looks like this:
The final production will look like this:
I hope you enjoyed building this little application. I would love to see your version of the app. Email me a screen shot of your work or simply follow and tag me in your Twitter posts :)
