Import static JSON data in React

Question

I am trying to load static JSON data to my react app. But, it wan't allow me to load data.

I am using webpack version 4.26.1

It shows me following error:

SyntaxError: src/data/movieData.json: Unexpected token, expected ; (2:10)

  1 | {
  2 |     "data": [
    |           ^
  3 |         {
  4 |           "id": 1,
  5 |           "title": "Freed",

My Code:

data/jsonResponse.json

{
    "data": [
        {
          "id": 1,
          "title": "Freed"
    },
    {
          "id": 2,
          "title": "Fifty"
    }
    ]
}

main.js

import React, { Component } from 'react';
import Content from './Content';
import  jsonResponse from './data/jsonResponse.json';

class Main extends Component {
    render() {
        return (
            <div className="main">
                <Content item={ jsonResponse } />
            </div>
        );
    }
}

export default Main;

Content.js

import React from 'react';

  const Content = () => {
    const movies = this.props.item.data;
      return (
        movies.map(movie => {
            return (
                <span >{movie.title}</span>
            );
         })
        )
}

export default Content;

Edited:

If i use js instead of JSON like:

const movies_data = {
   "data": [
            {
              "id": 1,
              "title": "Freed"
        },
        {
              "id": 2,
              "title": "Fifty"
        }
        ]
    }
export default movies_data;

and in Main.js file

import  jsonResponse from './data/movieData';

Then in browser it shows following error.

Cannot read property 'props' of undefined

The import expects a JavaScript source file, and JSON is not that. — Pointy
– Pointy, Commented Dec 4, 2018 at 15:07

Mehrdad Shokri · Accepted Answer · 2018-12-04 15:16:55Z

6

There are 2 workarounds for loading json files in a js file.

Rename your json file to .js extension and export default your json from there.
Since json-loader is loaded by default on webpack >= v2.0.0 there's no need to change your webpack configs.
But you need to load your json file as json!./data/jsonResponse.json (pay attention to json!)

EDIT:

Cannot read property 'props' of undefined

The reason you're getting this error is because you're trying to access this on a functional component!

answered Dec 4, 2018 at 15:16

Mehrdad Shokri

2,1542 gold badges31 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bartek Fryzowicz · Accepted Answer · 2018-12-04 15:15:04Z

2

Answer regarding edited question and Cannot read property 'props' of undefined error

You can't access this in functional components. props are passed as argument to functional components so please try this (Content.js file):

import React from 'react';

  const Content = (props) => {
    const movies = props.item.data;
      return (
        movies.map(movie => {
            return (
                <span >{movie.title}</span>
            );
         })
        )
}

export default Content;

answered Dec 4, 2018 at 15:15

Bartek Fryzowicz

6,70420 silver badges29 bronze badges

Comments

ehmprah · Accepted Answer · 2018-12-04 15:13:48Z

-1

You have to add a JSON loader to import json files.

answered Dec 4, 2018 at 15:13

ehmprah

1541 silver badge3 bronze badges

3 Comments

Mehrdad Shokri Over a year ago

json-loader is loaded by default

ehmprah Over a year ago

Only since version 2 it is :-)

Mehrdad Shokri Over a year ago

He mentioned it's 4.7

Leonardo Nascimento · Accepted Answer · 2018-12-04 15:17:30Z

-1

You need to check if in your Webpack config if exist an loader to JSON.

I recommend to use this loader. https://www.npmjs.com/package/json-loader

answered Dec 4, 2018 at 15:17

Leonardo Nascimento

1

2 Comments

ketan Over a year ago

I am using webpack version 4.26.1

Mehrdad Shokri Over a year ago

Please provide concrete answer with code snippets. pointing to references per se Does not help. Also, he mentioned he's webpack version is >=2.0.0 so your answer basically does nothing.

Collectives™ on Stack Overflow

Import static JSON data in React

4 Answers 4

Comments

Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related