Display JSX code from a JSON data in Reactjs - json

Question

I have a JSON which contains JSX code i.e
var data = {"content":"<ul className='list-group'><li className='list-group-item' onClick={this.svgMapClicked}>Name: Firmino</li><li className='list-group-item' >Goals: 22</li></ul>"}
In my Component, first I import the JSON i.e
import data from './data.json';
Then I have
this.state = {footy: data}
Now in my render function, I want to display it like but get the content from the JSON data:
render() {<div><ul className='list-group'><li className='list-group-item' onClick={this.svgMapClicked}>Name: Firmino</li><li className='list-group-item' >Goals: 22</li></ul></div>};
So, here is my render function:
render(){<div>{this.state.footy.content}</div>};
Instead of the JSX tag, {this.state.footy.content} is displayed as a string. I have searched for similar issue but I was unable to find.

Answer 1

Instead of storing the content HTML in json, you should store the data and create the content in JSX like
var data = [
{name: 'Firmino', goals: 22}
];
this.state = {footy: data}
and in render
render() {
return <div>
<ul className='list-group'>
{this.state.footy.map((player) => {
return <React.Fragment>
<li className='list-group-item' onClick={() => this.svgMapClicked(player)}>Name: {player.name}</li>
<li className='list-group-item' >Goals: {player.goals}</li>
</React.Fragment>
})}
</ul>
</div>
};
If you absolutely need to render the HTML then, you could use dangerouslySetInnerHTML like
render() {
return <div dangerouslySetInnerHTML={ { __html : this.state.footy} } />};