title: Local JSON file is not parsing in React
body: <p>I have a large JSON file which has around 5000 entries and when I parse it using fetch(), it doesn't show up in browser.
  Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import './Box.css';
  
  class Box extends React.Component {
   constructor() {
    super()
    this.state = {movieName: []}
   }
   componentDidMount() {
    fetch('./MovieDatabaseShort.json')
    .then(a =&gt; a.json())
    .then(movieName =&gt; this.setState({movieName}));
   }
   renderMovies() {
    const { movieName } = this.state;
    return movieName.map(a =&gt; {
     &lt;h1 key={ a.id } className='heading'&gt;{a.title}&lt;/h1&gt;;
    });
   }
   render() {
    return &lt;div className="box"&gt;{this.renderMovies()}&lt;/div&gt;;
   }
  }
  export default Box;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I just want to put all the movies titles.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import './Box.css';
  
  class Box extends React.Component {
   constructor() {
    super()
    this.state = {movieName: []}
   }
   componentDidMount() {
    fetch('https://support.oneskyapp.com/hc/en-us/article_attachments/202761627/example_1.json')
    .then(a =&gt; a.json())
    .then(movieName =&gt; this.setState({movieName: movieName.color}));
   }
   render() {
    console.log( this.state );
    return &lt;div className="box"&gt;{this.state.movieName}&lt;/div&gt;;
   }
  }
  export default Box;</code></pre>
  </div>
  </div>
  </p>
  
  <p><br/><strong>EDIT</strong>- In second code, I just copied random json file from net and it works fine. I think its's due to size of the json file I have. It's 250k+ lines.
  <br/><strong>Update</strong>- This works. I think problem is due to <code>fetch()</code></p>
  
  <pre><code>import React from 'react';
  import './Box.css';
  import a from './MovieDatabaseShort.json'
  class Box extends React.Component {
      constructor() {
          super()
          this.state = {movieName: []}
      }
      componentDidMount() {
          this.setState({movieName: a});
      }
      renderBox() {
          const { movieName } = this.state;
          return movieName.map(k =&gt; {
              return &lt;h1 className='heading'&gt;{k.title}&lt;/h1&gt;;
          })
      }
      render() {
          return (
              &lt;div className='box'&gt;{this.renderBox()}&lt;/div&gt;
          );
      }
  }
  export default Box;`
  </code></pre>