Local JSON file is not parsing in React

Question

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:

import React from 'react';
import './Box.css';

class Box extends React.Component {
	constructor() {
		super()
		this.state = {movieName: []}
	}
	componentDidMount() {
		fetch('./MovieDatabaseShort.json')
		.then(a => a.json())
		.then(movieName => this.setState({movieName}));
	}
	renderMovies() {
		const { movieName } = this.state;
		return movieName.map(a => {
			<h1 key={ a.id } className='heading'>{a.title}</h1>;
		});
	}
	render() {
		return <div className="box">{this.renderMovies()}</div>;
	}
}
export default Box;

I just want to put all the movies titles.

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 => a.json())
		.then(movieName => this.setState({movieName: movieName.color}));
	}
	render() {
		console.log( this.state );
		return <div className="box">{this.state.movieName}</div>;
	}
}
export default Box;

EDIT- 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.
Update- This works. I think problem is due to fetch()

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 => {
            return <h1 className='heading'>{k.title}</h1>;
        })
    }
    render() {
        return (
            <div className='box'>{this.renderBox()}</div>
        );
    }
}
export default Box;`

Answer 1

Another way using hook can be the following. In my case I need to take configuration data from a json file

import _data from '../../json/config.json';
export const Mapa = () => {
  
    const [config, setConfig] = useState(null);
    useEffect(()=>{                 
          setConfig(_data );
          
    },[]);
}

Answer 2

First of all, there are some places you should change in your code.

• You should keep an array property in your state for all movies: movies: []
• You should map this state value, then render some JSX.
• Use componentDidMount instead of componentWillMount since it will be deprecated in a future release.

Here is the example code:

class Box extends React.Component {
  constructor() {
    super();
    this.state = { movies: [] };
  }

  componentDidMount() {
    fetch("./MovieDatabaseShort.json")
      .then(res => res.json())
      .then(movies => this.setState({ movies }));
  }

  renderMovies() {
    const { movies } = this.state;
    return movies.map(movie => (
      <h1 key={movie.title} className="heading">
        {movie.title}
      </h1>
    ));
  }

  render() {
    return <div className="box">{this.renderMovies()}</div>;
  }
}

If you still don't see anything maybe fetch would the problem here. Then, try this:

class Box extends React.Component {
  constructor() {
    super();
    this.state = { movies: [] };
  }

  componentDidMount() {
    import("./MovieDatabaseShort.json").then(movies =>
      this.setState({ movies })
    );
  }

  renderMovies() {
    const { movies } = this.state;
    return movies.map(movie => (
      <h1 key={movie.title} className="heading">
        {movie.title}
      </h1>
    ));
  }

  render() {
    return <div className="box">{this.renderMovies()}</div>;
  }
}

Again, if nothing is shown up please share you JSON file with us as well as check your console if there is any error.

Answer 3

What it looks like you want to do is to save all movies into an array on your state. That would look more like this:

constructor() {
    super()
    this.state = {movies: []}
}
componentWillMount() {
    fetch('./MovieDatabaseShort.json')
    .then(a => a.json())
    .then(b => this.setState({movies: b}));
}

Then in your render function you would loop over your movies and display the title:

render() {
    const { movies } = this.state;
    return (
        <div className='box'>
            {movies.map(movie => <h1 className='heading'>{movie.title}</h1>)}       
        </div>
    );
}