Through a query to an API, I get a text that includes HTML tags. I have to include this text in JSX in a React.js program. The fact is that I have tried to use document.write() to be able to pass the String to HTML tags, and it does, but something happens because it remains eternally thinking. In fact, the rest of the elements I have such as the header, the link, the h1 title and the image disappear.
The part of the render would look like this:
render() {
return (<div>
<Header />
<div className='main-wrapper'>
<Router>
<Link className='back-home' to="/">Ver todas las noticias</Link>
</Router>
{
this.state.articles.map(articulo => {
console.log(articulo.content.rendered)
return (
<article className='article-wrapper' key={articulo.id}>
<h1>{articulo.title.rendered}</h1>
<img className='article-image' src={articulo.better_featured_image.media_details.sizes.small.source_url} />
<div className='article-content'>{document.write(articulo.content.rendered)}</div>
</article>
)
})
}
</div>
</div>)
}
However, I have tried to do the same by taking the text and testing it in a editor , and there it works, although the image does not load.