React: Load and Display Data from Local JSON Files

Last updated on August 13, 2022 A Goodman Loading... Post a comment

This practical, succinct article shows you how to load and render data from a local JSON file in React. Without any further ado, let’s get started.

Importing Local JSON Files

In a React project created with create-react-app, you can import a local JSON file as a regular ES module:

import data from './data.json';

The imported thing will be a Javascript object, not a JSON string. Therefore, you don’t have to call the JSON.parse() method. For example, if you import a JSON file that contains the following content:

{
   "id": 1,
   "username": "KindaCode.com"
}

You will get this Javascript object:

{id: 1, username: 'KindaCode.com'}

Fore more clarity, see the full example in the next section. If you’re working with Next.js, see this article: Reading and Display Data from a Local JSON File in Next.js

Complete Example

Dummy Data

Here’s the JSON data we’ll use for the example (just some fake blog posts):

{
    "posts": [
        {
            "id": 1,
            "title": "Post 1",
            "content": "Welcome to KindaCode.com. This is the full content of post 1"
        },
        {
            "id": 2,
            "title": "Post 2",
            "content": "This is the full content of post 2"
        },
        {
            "id": 3,
            "title": "Post 3",
            "content": "This is the full content of post 3"
        },
        {
            "id": 4,
            "title": "Post 4",
            "content": "This is the full content of post 4"
        }
    ]
}

App Preview

Here’s what we’re going to build: a simple React app that renders a list of blog posts:

Writing Code

1. To make sure we have the same starting point, you should initialize a new React project:

npx create-react-app kindacode-example

2. In the “src” folder of your project, create a new file called “data.json”. Add the dummy data you’ve seen earlier to this file:

3. Replace all of the default code in your “App.js” with the following:

// KindaCode.com
// src/App.js
import './App.css';

// import JSON data from data.json
import data from './data.json';

function App() {
  const posts = data.posts;

  return (
    <>
      <div className='container'>
        <h1>Blog Posts</h1>
        <div className='posts'>
          {posts.map((post) => (
            <div className='post' key={post.id}>
              <h2 className='title'>{post.title}</h2>
              <p className='content'>{post.content}</p>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

export default App;

4. And here is the CSS code:

/* 
KindaCode.com
App.css 
*/

.container {
  width: 80%;
  margin: 30px auto;
}

h1 {
  display: inline-flex;
  padding: 10px 30px;
  background: #2196f3;
  color: #fff;
}

5. Get it up and running:

npm start

Finally, go to http://localhost:3000 to examine your work.

Conclusion

You’ve learned how to fetch and render local JSON data in React. The approach itself isn’t tough but very helpful in many scenarios, such as when you need to build a small web app without frequent data updates and you don’t want to spend a lot of time developing a backend API.

If you’d like to explore more new and fascinating stuff in the modern React world, take a look at the following articles:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles