by Sai gowtham

How to load a JSON file in React

In this tutorial, we are going to learn about how to load and read the JSON file in a React app.

Consider, we have this users.json file in our react app.

users.json
[
  {
    "id": 1,
    "name": "John"
  },
  {
    "id": 2,
    "name": "Pen"
  },
  {
    "id": 3,
    "name": "Lara"
  }
]

Now, we are loading this above JSON file into the react component.

Loading the JSON file

We can load a JSON file into the react component, just like how we import JavaScript modules or CSS modules using the es6 import statement.

App.js
import React from "react";
import Users from "./users.json";
export default function App() {

  return (
    <div className="App">
      <h1>Users list</h1>
      {Users.map(user => (        <li key={user.id}>{user.name}</li>      ))}    </div>
  );
}

In the above code, we first imported the users.json file as a Users JSON array and rendered it into the dom by using the JavaScript map() method.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course