[Solved]-React component not re-rendering when state changes-Reactjs

if you want to re-render on any update then you should use

componentWillReceiveProps(nextProps){
  this.setState({element:nextProps.data})
}

componentDidUpdate() will be invoked if a re-rendering is complete => In fact like you said there is no re-rendering because you never invoke any setState Method.

I'm not very sure if a state can hold a JSX content.

Maybe try it like this:

this.setState({
    element: data.content
})

==

<div style={{backgroundImage:`url(${background})`,height:'100vh',overflowX:'hidden',backgroundSize:'cover'}}>
    <Navbar/>
    <InfoDisplay data={this.state.element} />
</div>

hope you find your bug with this information

You can really simplify this and make it cleaner, and this should also fix your problem:

In your render do:

return (
    <div style={{backgroundImage:`url(${background})`,height:'100vh',overflowX:'hidden',backgroundSize:'cover'}}>
        <Navbar/>
        <InfoDisplay data={this.state.data} />
    </div>
    )

Then in your componentDidMount and componentDidUpdate all you have to do is set the state data to data.content from your request:

 case 'legende': import('../data/legends.json').then((data) => {
            this.setState({
                data: data.content,
            });
        });

obviously you will need to change your constructor as well to be have data:

this.state = {data: null};

Hope this helps.