How to convert plain text to html JSX in ReactJS

Question

I have a component like this:

import React from 'react'; import Autolinker from 'autolinker'; class Comment extends React.Component{ constructor(props){ super(props); } render(){ return <li className="media comment"> <div className="image"> <img src={this.props.activity.user.avatar.small_url} width="42" height="42" /> </div> <div className="body"> <p> <strong>{this.props.activity.user.full_name}</strong> </p> </div> <div> <p> {Autolinker.link(this.props.activity.text)} </p> </div> </li>; } } export default Comment; 

Autolinker returns me a string value similar to this:

 "So basically <a href="http://www.silastar.com/dev-sila" target="_blank">silastar.com/dev-sila</a> is perfect and works correctly?" 

How to convert this string to JSX html so that the anchor link appears as a link, not like plain text

Answer 1

You must use dangerouslySetInnerHTML :

 <p dangerouslySetInnerHTML={{__html: Autolinker.link(this.props.activity.text)}} />