title: Import static JSON data in React
body: <p>I am trying to load static JSON data to my react app. But, it wan't allow me to load data.</p>
  
  <p>I am using webpack version 4.26.1</p>
  
  <p>It shows me following error:</p>
  
  <pre><code>SyntaxError: src/data/movieData.json: Unexpected token, expected ; (2:10)
  
    1 | {
    2 |     "data": [
      |           ^
    3 |         {
    4 |           "id": 1,
    5 |           "title": "Freed",
  </code></pre>
  
  <p>My Code:</p>
  
  <p><strong>data/jsonResponse.json</strong></p>
  
  <pre><code>{
      "data": [
          {
            "id": 1,
            "title": "Freed"
      },
      {
            "id": 2,
            "title": "Fifty"
      }
      ]
  }
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import Content from './Content';
  import  jsonResponse from './data/jsonResponse.json';
  
  class Main extends Component {
      render() {
          return (
              &lt;div className="main"&gt;
                  &lt;Content item={ jsonResponse } /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Main;
  </code></pre>
  
  <p><strong>Content.js</strong></p>
  
  <pre><code>import React from 'react';
  
    const Content = () =&gt; {
      const movies = this.props.item.data;
        return (
          movies.map(movie =&gt; {
              return (
                  &lt;span &gt;{movie.title}&lt;/span&gt;
              );
           })
          )
  }
  
  export default Content;
  </code></pre>
  
  <p><strong><em>Edited:</em></strong></p>
  
  <p>If i use js instead of JSON like:</p>
  
  <pre><code>const movies_data = {
     "data": [
              {
                "id": 1,
                "title": "Freed"
          },
          {
                "id": 2,
                "title": "Fifty"
          }
          ]
      }
  export default movies_data;
  </code></pre>
  
  <p>and in Main.js file</p>
  
  <pre><code>import  jsonResponse from './data/movieData';
  </code></pre>
  
  <p>Then in browser it shows following error.</p>
  
  <blockquote>
    <p>Cannot read property 'props' of undefined</p>
  </blockquote>