Render HTML string as real HTML in a React component
Is this.props.match.description
a string or an object? If it's a string, it should be converted to HTML just fine. Example:
class App extends React.Component {constructor() { super(); this.state = { description: '<h1 style="color:red;">something</h1>' } } render() { return ( <div dangerouslySetInnerHTML={{ __html: this.state.description }} /> ); }}ReactDOM.render(<App />, document.getElementById('root'));
Result: http://codepen.io/ilanus/pen/QKgoLA?editors=1011
However if description is <h1 style="color:red;">something</h1>
without the quotes ''
, you're going to get:
Object {$$typeof: [object Symbol] {}, _owner: null, key: null, props: Object { children: "something", style: "color:red;" }, ref: null, type: "h1"}
If It's a string and you don't see any HTML markup the only problem I see is wrong markup..
UPDATE
If you are dealing with HTML Entities, You need to decode them before sending them to dangerouslySetInnerHTML
that's why it's called "dangerously" :)
Working example:
class App extends React.Component { constructor() { super(); this.state = { description: '<p><strong>Our Opportunity:</strong></p>' } } htmlDecode(input){ var e = document.createElement('div'); e.innerHTML = input; return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue; } render() { return ( <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} /> ); }}ReactDOM.render(<App />, document.getElementById('root'));
I use 'react-html-parser'
yarn add react-html-parser
import ReactHtmlParser from 'react-html-parser'; <div> { ReactHtmlParser (html_string) } </div>
Source on npmjs.com
Lifting up @okram's comment for more visibility:
from its github description: Converts HTML strings directly into Reactcomponents avoiding the need to use dangerouslySetInnerHTML fromnpmjs.com A utility for converting HTML strings into React components.Avoids the use of dangerouslySetInnerHTML and converts standard HTMLelements, attributes and inline styles into their React equivalents.
Check if the text you're trying to append to the node is not escaped like this:
var prop = { match: { description: '<h1>Hi there!</h1>' }};
Instead of this:
var prop = { match: { description: '<h1>Hi there!</h1>' }};
if is escaped you should convert it from your server-side.
The node is text because is escaped
The node is a dom node because isn't escaped