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=\"/\" target=\"_blank\">here</a>."
}]

someComponent.js

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

        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>
        )
    }
});

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>
        )
    }
});

• javascript
• json
• reactjs

• You can't put an anchor tag inside of the img tag's src attribute... – Kenny Commented Jun 13, 2016 at 18:51
• crap bad post, hold on – PositiveGuy Commented Jun 13, 2016 at 18:55

3 Answers 3

You can use dangerouslySetInnerHTML

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

Example

Another option and I think cheap to use is NPM React Plugin

https://www.npmjs.com/package/react-html-parser

I have used this and feeling good.

I think the best solution is to just get a ref on the container which will contain the HTML and then just set its innerHTML to the HTML-string which should be rendered.