0

I am rendering JSX which is come from API call. API call returns me JSON of 10 object's array and I set this array by using this.setState({Posts: JSON.Array}) and then I do this:

render(){
return(<div>
{this.state.Posts.map(post=>(<div> <span>2018-07-10</span>
<h2>{post.title.rendered}</h2> 
<p>{post.excerpt.rendered}</p></div>))}
</div>);
}

Now my JSON is as look like: Array:[ {title: {rendered: "this is title(type is string) " }, excerpt: {rendered: "here is my JSX(type is JSX)" } }, { }, { },...]

Everything works fine, but here the title is rendering easily because it is a string but excerpt ( type of JSX) is rendering as a string instead of JSX and the output looks like : enter image description here

So how can I fix it, I want to render excerpt as JSX, not as a string I read some documentation of this, they said put JSX in an array ie. {[post.excerpt.rendered]} but this is not working.

B4BIPIN
  • 353
  • 2
  • 11

1 Answers1

0

You can try out dangerouslySetInnerHTML for excerpts 

<p dangerouslySetInnerHTML={__html: post.excerpt.rendered }></p>;
Manoz
  • 6,507
  • 13
  • 68
  • 114