7

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>
        )
    }
});
2
  • You can't put an anchor tag inside of the img tag's src attribute... Commented Jun 13, 2016 at 18:51
  • crap bad post, hold on Commented Jun 13, 2016 at 18:55

3 Answers 3

14

You can use dangerouslySetInnerHTML

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

Example

Sign up to request clarification or add additional context in comments.

Comments

0

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.

2 Comments

Using an extra package instead of dangerouslySetInnerHTML looks like overkill.
even I was not aware at that. Its 2 year old comment
0

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.

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.