title: Uncaught (in promise) SyntaxError: Unexpected token in React
body: <p>i got this error</p>
  <pre><code>VM305:1 Uncaught (in promise) SyntaxError: Unexpected token &lt; in JSON at position 0
  </code></pre>
  <p>and I don't know why. My json data:</p>
  <pre><code>[
    {
     &quot;id&quot;: 1,
      &quot;title&quot;: &quot;Avatar&quot;,
      &quot;distributor&quot;: &quot;20th Century Fox&quot;,
      &quot;year&quot;: 2009,
      &quot;amount&quot;: &quot;$2,787,965,087&quot;,
      &quot;img&quot;: {
        &quot;src&quot;: &quot;media/avatar.jpg&quot;,
        &quot;alt&quot;: &quot;avatar&quot;
      },
      &quot;ranking&quot;: 1
    },
    {
      &quot;id&quot;: 2,
      &quot;title&quot;: &quot;Titanic&quot;,
      &quot;distributor&quot;: &quot;20th Century Fox&quot;,
      &quot;year&quot;: 1997,
      &quot;amount&quot;: &quot;$2,187,463,944&quot;,
      &quot;img&quot;: {
        &quot;src&quot;: &quot;media/titanic.jpg&quot;,
        &quot;alt&quot;: &quot;titanic&quot;
      },
      &quot;ranking&quot;: 2
    },
    {
      &quot;id&quot;: 3,
      &quot;title&quot;: &quot;Star Wars: The Force Awakens&quot;,
      &quot;distributor&quot;: &quot;Walt Disney Studios Motion Pictures&quot;,
      &quot;year&quot;: 2015,
      &quot;amount&quot;: &quot;$2,068,223,624&quot;,
      &quot;img&quot;: {
        &quot;src&quot;: &quot;media/star_wars_the_force_awakens.jpg&quot;,
        &quot;alt&quot;: &quot;star_wars_the_force_awakens&quot;
      },
      &quot;ranking&quot;: 3
    },
    {
      &quot;id&quot;: 4,
      &quot;title&quot;: &quot;Avengers: Infinity War&quot;,
      &quot;distributor&quot;: &quot;Walt Disney Studios Motion Pictures&quot;,
      &quot;year&quot;: 2018,
      &quot;amount&quot;: &quot;$2,048,359,754&quot;,
      &quot;img&quot;: {
        &quot;src&quot;: &quot;media/avengers_infinity_war.jpg&quot;,
        &quot;alt&quot;: &quot;avengers_infinity_war&quot;
      },
      &quot;ranking&quot;: 4
    },
    {
      &quot;id&quot;: 5,
      &quot;title&quot;: &quot;Jurassic World&quot;,
      &quot;distributor&quot;: &quot;Universal Pictures&quot;,
      &quot;year&quot;: 2015,
      &quot;amount&quot;: &quot;$1,671,713,208&quot;,
      &quot;img&quot;: {
        &quot;src&quot;: &quot;media/jurassic_world.jpg&quot;,
        &quot;alt&quot;: &quot;jurassic_world&quot;
      },
      &quot;ranking&quot;: 5
    }
  ]
  </code></pre>
  <pre><code>class List extends Component {
    constructor() {
      super();
      this.state = {
        data: [],
        loading: true,
      };
    }
  
    async componentDidMount() {
      
      const movies = await fetch('../../assets/data.json');
      const moviesJSON = await movies.json();
    
      console.log(moviesJSON);
      if (moviesJSON) {
        this.setState({
          data: moviesJSON,
          loading: false,
        });
      }
    }
  
    render() {
      const { data, loading } = this.state;
  
      if (loading) {
        return &lt;div&gt;Loading...&lt;/div&gt;;
      }
  
      return (
        &lt;div className='row'&gt;
          {data.map(movie =&gt; (
            &lt;div key={movie.id} className='col-sm-2'&gt;
              &lt;Card movie={movie} /&gt;
            &lt;/div&gt;
          ))}
        &lt;/div&gt;
      );
    }
  }
  
  export default List;
  </code></pre>