JSON in React — Fetching, Parsing & Displaying API Data

Working with JSON Data in React Applications

Complete guide to fetching, parsing, and displaying JSON API data in React using fetch(), useEffect, useState, and TypeScript interface generation.

In React, use the fetch() API inside useEffect() to load JSON data, then call response.json() to parse it. Store the result in useState() and render it in your component JSX.

JSON Data Fetching in React

React components consume JSON API data through fetch calls in useEffect hooks. The pattern involves managing loading, success, and error states with useState.

TypeScript Interface Generation

Paste your API response JSON into our TypeScript Generator to auto-generate accurate React prop interfaces and state types in seconds.

json

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

export function UserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch('/api/users')
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json() as Promise<User[]>;
      })
      .then(data => { setUsers(data); setLoading(false); })
      .catch(err => { setError(err.message); setLoading(false); });
  }, []);

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

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

Frequently Asked Questions

How do I fetch JSON in a React component?

Use fetch() inside useEffect() and call response.json() to parse the response. Store the result with useState().

How do I type JSON API responses in React TypeScript?

Define a TypeScript interface matching the JSON shape, or use our free JSON to TypeScript generator.

How do I display JSON data in React JSX?

Store the parsed JSON in state with useState, then map over arrays or access object properties in your JSX return.