API Integration – Displaying API Data in React

Introduction

After successfully fetching data from an API, the next critical step is displaying that data in the UI. Displaying API data correctly ensures that users can view information clearly, interact with it smoothly, and understand the application state.

In React, displaying API data is done using state, conditional rendering, and reusable components.

What Does Displaying API Data Mean?

Displaying API data means:

• Receiving data from an API
• Storing it in component state
• Rendering it dynamically in JSX
• Handling loading and error states
• Updating UI when data changes

This is a core skill for building data-driven React applications.

Basic Flow of Displaying API Data

1. Call the API
2. Store response in state
3. Loop through the data
4. Render UI elements
5. Handle loading and errors

Example: Displaying API Data Using Fetch

import { useEffect, useState } from "react";

function UsersList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UsersList;

Explanation:

• API data is stored in state
• map is used to render list items
• key ensures efficient rendering

Displaying API Data Using Axios

import { useEffect, useState } from "react";
import axios from "axios";

function UsersList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((response) => setUsers(response.data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.email}</li>
      ))}
    </ul>
  );
}

export default UsersList;

Axios simplifies JSON handling and response access.

Displaying Data Using Conditional Rendering

Always check if data exists before rendering.

{users.length === 0 ? (
  <p>No data available</p>
) : (
  users.map((user) => <p key={user.id}>{user.name}</p>)
)}

Prevents UI crashes and improves UX.

Displaying API Data in a Table

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    {users.map((user) => (
      <tr key={user.id}>
        <td>{user.name}</td>
        <td>{user.email}</td>
      </tr>
    ))}
  </tbody>
</table>

Tables are useful for structured data.

Displaying Nested API Data

API responses often contain nested objects.

<p>{user.address.city}</p>

Use optional chaining for safety.

<p>{user.address?.city}</p>

Handling Loading and Error States While Displaying Data

if (loading) return <p>Loading...</p>;
if (error) return <p>{error}</p>;

Always show meaningful feedback.

Rendering Components from API Data

Best practice is to use reusable components.

function UserCard({ user }) {
  return <div>{user.name}</div>;
}

{users.map((user) => (
  <UserCard key={user.id} user={user} />
))}

Improves readability and scalability.

Updating UI When API Data Changes

React automatically re-renders UI when state updates.

Example:

• Refresh list after delete
• Update UI after form submission
• Show updated values after API call

Common Mistakes While Displaying API Data

• Forgetting key in lists
• Rendering before data is loaded
• Ignoring null or undefined values
• Overloading components with logic
• Hardcoding UI values

Best Practices for Displaying API Data

• Use conditional rendering
• Keep UI components reusable
• Handle empty states
• Validate API response structure
• Separate API and UI logic

Interview Questions and Answers – Displaying API Data

1. How do you display API data in React?

By storing API response in state and rendering it using JSX.

2. Why is map used to display API data?

To dynamically render lists from arrays.

3. Why is key important when rendering lists?

It helps React identify elements and optimize rendering.

4. How do you avoid rendering errors?

Using conditional rendering and optional chaining.

5. Can React update UI automatically after API calls?

Yes, when state changes, React re-renders the UI.

6. How do you display nested API data safely?

Using optional chaining.

7. What happens if API data is empty?

You should show an empty or fallback UI.

8. Can API data be displayed in multiple components?

Yes, using reusable components.

9. Should API data logic be inside UI components?

Only for small apps. Larger apps should separate logic.

10. Is displaying API data a core React skill?

Yes, it is essential for real-world applications.