WTF WTF - 5 months ago 32
JSON Question

Get HTML in JSON to render as HTML in React Component

Trying to figure out how can i get the link to actually render as a link. Right now after i read this line of text from my Json file, react renders the hyperlink as literal text, it doesn't render it as a link.

someData.json

[{
"about": "John has a blog you can read <a href=\"http://www.john.com/blog/\" target=\"_blank\">here</a>."
}]


someComponent.js

const Person = Component({
store: Store('/companies'),
render(){
var company = this.store.value()[this.props.companyId];

return (
<div id='ft-interviewee className="all-100"'>
<p className="section-heading bold padding-top-20 font-22">Person</p>
<div className="column-group horizontal-gutters">
<div className="all-10">
<div>{company.people.person.about}</div>
</div>

</div>
)
}
});

Answer

You can use dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={ { __html: company.people.person.about } }></div>

Example