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

Solution 1

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

1. Rename your json file to .js extension and export default your json from there.

2. 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!

Solution 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;

Comments

[Mehrdad Shokri]

How your config is setup? Do you use webpack?

[Pointy]

The import expects a JavaScript source file, and JSON is not that.

[ketan]

@MehiShokri Yeah i am using webpack.

[kind user]

@Pointy What's wrong with importing JSON?

[Mehrdad Shokri]

which version ?

[Pointy]

@kinduser the open { in the JSON file is interpreted as the start of a JavaScript block statement. JSON source is simply not JavaScript by itself.

[Jason Lock]

Please the answer here: stackoverflow.com/questions/33650399/…

[Mehrdad Shokri]

@ jasonlock Doesn't apply. json-loader is loaded by default since >=2.2

[ketan]

@MehiShokri version 4.26.1

[ketan]

@Pointy I edited my question

[Mehrdad Shokri]

@ketan answered your question regarding edit.

[ketan]

@MehiShokri Yeah. Thanks for answer. With Js now working as per Bartek Fryzowicz and you answer so, i up voted both. But, checking with JSON as per your answer.

[Mehrdad Shokri]

json-loader is loaded by default

[ehmprah]

Only since version 2 it is :-)

[Mehrdad Shokri]

He mentioned it's 4.7

[ketan]

I am using webpack version 4.26.1

[Mehrdad Shokri]

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.