React - How to pass HTML tags in props?

Question

I want to be able to pass text with HTML tags, like so:

not working.\" />

Bu

Answer 1

In my project I had to pass dynamic html snippet from variable and render it inside component. So i did the following.

defaultSelection : {
    innerHtml: {__html: '<strong>some text</strong>'}
}

defaultSelection object is passed to component from .js file

<HtmlSnippet innerHtml={defaultSelection.innerHtml} />

HtmlSnippet component

var HtmlSnippet = React.createClass({
  render: function() {
    return (
      <span dangerouslySetInnerHTML={this.props.innerHtml}></span>
    );
  }
});

Plunkr example

react doc for dangerouslySetInnerHTML

Answer 2

You can successfully utilize React fragments for this task. Depending on the React version you use, you can use short syntax: <> or the full tag: <React.Fragment>. Works especially well if you don't want to wrap entire string within HTML tags.

<MyComponent text={<>Hello World. <u>Don't be so ruthless</u>.</>} />

Answer 3

Set the text prop type to any and do this:

<MyComponent text={
    <React.Fragment>
        <div> Hello, World!</div>
    </React.Fragment>
    } 
/>

Example

Answer 4

<MyComponent text={<span>This is <strong>not</strong> working.</span>} />

and then in your component you can do prop checking like so:

import React from 'react';
export default class MyComponent extends React.Component {
  static get propTypes() {
    return {
      text: React.PropTypes.object, // if you always want react components
      text: React.PropTypes.any, // if you want both text or react components
    }
  }
}

Make sure you choose only one prop type.

Answer 5

Here is a solution that doesn't use the dangerouslySetInnerHTML which is dangerous as the name says.

import { IntlProvider, FormattedMessage } from "react-intl";

<FormattedMessage
          id="app.greeting"
          description="Bold text example"
          defaultMessage="Look here, I can include HTML tags in plain string and render them as HTML: <b>Bold</b>, <i>Italics</i> and <a>links too</a>."
          values={{
            b: (chunks) => <b>{chunks}</b>,
            i: (chunks) => <i>{chunks}</i>,
            a: (chunks) => (
              <a class="external_link" target="_blank" href="https://jiga.dev/">
                {chunks}
              </a>
            )
          }}
        />

This should be rendered as:

Full example in https://jiga.dev/react-render-string-with-html-tags-from-props/

Answer 6

Have appended the html in componentDidMount using jQuery append. This should solve the problem.

 var MyComponent = React.createClass({
    render: function() {

        return (
           <div>

           </div>
        );
    },
    componentDidMount() {
        $(ReactDOM.findDOMNode(this)).append(this.props.text);
    }
});