How to Read the Content of a JSON File in Your React Component

JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write, and easy for machines to parse and generate. It is often used to transmit data between a server and web application in a structured format.

Sometimes in the apps we build, we need to use stoppers to replace the backend called by our react code.

This is where the JSON file containing the data to be returned by the backend comes into play. In this article, I’ll show you how you can read a JSON file in your React component.

How to Read a JSON file

First thing first, you have to create a new react project

 npx create-react-app your-react-app

Once the npx command has finished to run, you will have a basic react app structure which will look like this

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

Now we will add the data.json file in the public directory

  public/ 
    index.html
    favicon.ico
    data.json

In the data.json file, add the following snippet

[
  { "category": "Fruits", "price": "1", "name": "Apple" },
  { "category": "Fruits", "price": "1", "name": "Dragon fruit" },
  { "category": "Fruits", "price": "2",  "name": "Passion fruit" },
  { "category": "Vegetables", "price": "2", "name": "Spinach" },
  { "category": "Vegetables", "price": "4", "name": "Pumpkin" },
  { "category": "Vegetables", "price": "1", "name": "Peas" }
]

Now in the react component, let say your App.js , you can use the fetch API to retrieve the data in your react component

import './App.css';
import {useEffect, useState} from "react";

function App() {

  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(process.env.PUBLIC_URL + '/data.json')
        .then(response => response.json())
        .then(jsonData => setData(jsonData))
        .catch((error) => console.error('Error reading JSON file →', error));
  }, []);

  console.log(data)

  return (
    <div className="App">
      {/*  use the JSON data here */}
    </div>
  );
}

export default App;

The console.log(data) will show all the content of the JSON file, and the process.env.PUBLIC_URL will point to the public directory.

Now you can run the app with the following command.

npm start

Wrapping Up

In summary, the ability to read the content of a JSON file in a React component is useful for integrating data, communicating with APIs and customizing application settings.

Get the code source here in my GitHub account 👇🏽

BLOG-TUTORIALS/Javascript/read-the-content-of-a-json-file-in-react-component at master · 1kevinson/BLOG-TUTORIALS

Curated list of repositories and links attached to my blog articles - 1kevinson/BLOG-TUTORIALS

GitHub1kevinson