Display API Data in React: A Complete Guide for Beginners (2026)

In this tutorial, you will learn how to fetch data from an API and display it in a React application. This is a common task in web development, and understanding how to do it correctly can make your applications more dynamic and interactive.

Key Takeaways

• Learn how to set up a React project using functional components.
• Understand how to fetch and handle API data in React.
• Implement error handling to avoid common mistakes.
• Display the data retrieved from an API in a user-friendly format.

Fetching and displaying data is a fundamental task in many web applications. By the end of this tutorial, you will be equipped with the knowledge to handle API requests in React, display the data, and manage errors effectively. This not only enhances the user experience but also strengthens your skills as a developer.

Prerequisites

• Basic understanding of JavaScript and React.
• Node.js and npm installed on your computer.
• Access to a code editor like VSCode.

Step 1: Set Up Your React Project

First, you need to create a new React project. You can do this using Create React App, which sets up a new React project with all necessary configurations.

npx create-react-app display-api-data

Navigate into your project directory:

cd display-api-data

Start the development server:

npm start

Your browser should automatically open http://localhost:3000 with the default React page.

Step 2: Create the API Client

Next, create a new file called apiClient.ts in the src directory. This file will handle fetching data from the API.

export async function fetchUsers() {  const response = await fetch('https://jsonplaceholder.typicode.com/users');  if (!response.ok) {    throw new Error('Network response was not ok');  }  return response.json();}

This function fetches user data from a public API and returns it as a JSON object.

Step 3: Fetch and Display Data in React

Create a new component named UserList.tsx:

import React, { useState, useEffect } from 'react';import { fetchUsers } from './apiClient';type User = {  id: number;  name: string;  email: string;};const UserList: React.FC = () => {  const [users, setUsers] = useState([]);  const [error, setError] = useState(null);  useEffect(() => {    const getUsers = async () => {      try {        const users = await fetchUsers();        setUsers(users);      } catch (error) {        if (error instanceof Error) {          setError(error.message);        } else {          setError('An unknown error occurred');        }      }    };    getUsers();  }, []);  if (error) {    return Error: {error};  }  return (          {users.map(user => (        {user.name} - {user.email}      ))}      );};export default UserList;

In this component, we use the useEffect hook to fetch data when the component mounts. The data is stored in the users state, and any errors are captured in the error state.

Step 4: Handle Common Errors

The most common error when fetching API data is attempting to access properties of undefined objects. This occurs when the API response isn't what you expect. Always check if the response is valid before trying to access data properties.

Common Errors/Troubleshooting

• TypeError: Cannot read properties of undefined (reading 'length'): This error usually occurs when you try to access the length of an undefined object. Ensure your data is defined before accessing its properties.
• Network Error: Check if the API endpoint is correct and the server is running.
• Unhandled Promise Rejection: Ensure all promises are awaited and errors are properly caught.

By following these steps, you will be able to fetch, handle, and display API data in your React applications effectively.

Frequently Asked Questions

Why is my API data not displaying?

Ensure the API endpoint is correct and the data is being correctly fetched and set into state.

How do I handle API errors in React?

Use try-catch blocks in async functions and conditionally render error messages in your components.

What is the best way to render fetched data?

Map over the data array and render each item in a list format. Ensure keys are set for list items.