How to Fetch Data from a JSON File in React JS

Introduction

Fetching data from a JSON file in React JS is simple. React is a popular JavaScript library for building user interfaces. Sometimes, you want to load data from a file rather than a server. In this guide, I will show you how to do just that using the fetch function.

Getting Started

Before we dive in, make sure you have a React app set up. You can create one using Create React App. Once your app is ready, you can start adding your JSON file.

Step 1: Create a JSON File

First, create a JSON file. This file should be in the public folder of your React app. Let’s call it data.json. Here is an example of what the content might look like:

{
  "users": [
    { "id": 1, "name": "John Doe", "email": "john@example.com" },
    { "id": 2, "name": "Jane Smith", "email": "jane@example.com" }
  ]
}

This file contains an array of users with their IDs, names, and emails.

Step 2: Fetch the Data

Now that we have our JSON file, let's fetch the data in our React component. You can use the fetch function to get this data. Here’s how to do it:

import React, { useEffect, useState } from 'react';

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/data.json')
      .then(response => response.json())
      .then(data => setUsers(data.users))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

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

export default UserList;

Let’s break this down:

• We import useEffect and useState from React to manage state and side effects.
• The useState hook sets an initial empty array for users.
• Inside useEffect, we call fetch with the path to our JSON file.
• Next, we convert the response to JSON and update our state with setUsers.
• If there is an error, we catch it and log it to the console.

Step 3: Display the Data

In the return statement, we create an unordered list. We map over the users array and display each user's name and email. Each list item gets a unique key using the user's ID. This is important for React to keep track of items in the list.

Testing It Out

Now that we have everything set up, you can run your React app. Open your browser and go to http://localhost:3000. You should see the names and emails of users from your JSON file displayed on the page.

Error Handling

Sometimes, things may not work as expected. For example, if the JSON file is missing or the path is incorrect, you will see an error in the console. It’s always a good practice to handle errors properly. In the example above, we log any errors to the console, but you could also show an error message in the UI if you prefer.

Conclusion

Fetching data from a JSON file in React is straightforward. Just create your JSON file, use the fetch function, convert the response to JSON, and update your component’s state. With these simple steps, you can easily display data from a file in your app.

Start playing around with this method! You can build more complex features by fetching data from APIs or combining different data sources. The possibilities are endless. Happy coding!