React Fundamentals Part 2: Fetch and Display Data
Welcome to the second article in this series on building applications with React. The objective is to guide you through the process of building small applications while emphasizing the core concepts of React. Whether you are a seasoned developer looking to strengthen your skill set or a beginner eager to learn, this series will provide you with a solid foundation by building projects.
Getting Started:
In the GitHub repository, I have included starter code for this project. Download the code from the starter branch and open it in VS Code.
In your integrated terminal, run the following commands:
npm install
npm run dev
Open the application in your browser at http://localhost:5173/
Project #2: Fetch and Display User Data
In this project, we will focus on making a fetch request to an API to get user data and then display that information to the page. This is a fundamental skill that is necessary for all React developers to know.
Objective:
- Build an application that makes a request to an API to get user data.
- Once the data is received, render it to the page in the form of a table.
- The table should include the following columns: Name, Title, Email, Phone, Birthday
- The endpoint to get the user data from is https://random-data-api.com/api/v2/users
- The endpoint accepts a parameter of size=number to determine the number of users requested
- Example: returns 20 users → https://random-data-api.com/api/v2/users?size=20
Note:
If you feel that you already have the skills needed to build this application, stop now and try to build it yourself! Then, come back to compare your solution with mine.
Solution:
In App.tsx, start by importing the useEffect and useState hooks from React. We will use these hooks to make the fetch request and store the user data that is received.
If you are using TypeScript, the next step will be to define the shape of the objects that we will be receiving from the API. Click on the link for the random data API to see a sample user object. https://random-data-api.com/api/v2/users
We will not need to use all of these properties, but we will need to define the ones that we want to use in the JSX. In App.tsx, above the App component, define an interface called User with the following properties.
Within the App component, initialize state to hold the array of users that you will receive.
Next, we will make a request to the API endpoint. I am setting the size parameter to be 20 users, but you can choose to do more or fewer, as you prefer.
Inside useEffect, declare an async function to fetch the list of users. Once received, setUserData to the list of users. Don’t forget to call the getUsers function after you have declared it. You can confirm if this is successful, by console logging the userData.
Once you are successfully receiving the data from the API, you can build the structure for the table to display the data. Start by putting a title and subtitle at the top of the page. Then, create the table and the heading section with the names of each column.
In the body section of the table use the map method to iterate through the array of users and display the information to the table by dynamically calling the appropriate user properties.
In my version, I have also added row numbers and have done a little string manipulation to clean up the phone numbers, but this is optional. The main goal is to get the appropriate user fields rendered to each column of the table.
Once the user data is being displayed correctly, go back and try adjusting the size parameter of the fetch request. Experiment with requesting 10, 20, 50, or 100 users. This is where you can see the power of building applications with React as you can render data quickly and dynamically to the page.
Now that the functionality is working, add classNames where needed in order to style the application. You can see mine here:
I would recommend trying to do your own unique styling. However, if you need a starting point my styles can be found here in the GitHub repository.
Conclusion:
Fetching data from an endpoint and dynamically rendering that data to the page is at the heart of building React applications. This project provides a great way to strengthen that skill.
I hope you found this article helpful! Please don’t hesitate to reach out with any questions or comments.
