How to load data from a local JSON file in React Javascript

In this post, we will see how we can read and display the data from a local JSON file in React.

Assume we have a users.json file in our project and we want to show the data in a component.

[
  {
    "id": 1,
    "username": "Mani",
    "class":"7"

  },
  {
    "id": 2,
    "username": "Teja",
    "class":"9"
  },
]

To show the data in a component, first, we need to import the file to the component

import Users from users.json

That's it guys now you have access to the JSON Data in Users.

<div>
   {
    Users.map (user => <h1 key={user.id}> {user.name} </h1>)
   }
</div>