React js Mapping

How to import from a Local JSON Data File into React JS

July 19, 2023

 I'll show you a few common ways to import and use JSON data in a React.js application.

  1. Import from a Local JSON File:

    // data.json
    [
        {
          "userId": 1,
          "id": 1,
          "title": "sunt aut facere repellat provident occaecati ",
          "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita "
        },
        {
          "userId": 1,
          "id": 2,
          "title": "qui est esse",
          "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor "
        },
        {
          "userId": 1,
          "id": 3,
          "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
          "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi"
        }
      ]

    // App.js
    import React from 'react';
    import data from './data.json'; // Import the JSON file

    export default function App() {
      return (
        <div>
          <h1>{data.name}</h1>
          <ul>
          {data.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.title}</td>
                <td>{item.body}</td>
                <td>{item.email}</td>
              </tr>
            ))}
          </ul>
        </div>
      );
    }