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

This question has already a lot of answers, but I had was doing something wrong related to this and I think is worth sharing:

I had something like this:

export default function Features() {
  return (
    <Section message={<p>This is <strong>working</strong>.</p>} />
  }
}

but the massage was longer than that, so I tried using something like this:

const message = () => <p>This longer message is <strong>not</strong> working.</p>;

export default function Features() {
  return (
    <Section message={message} />
  }
}

It took me a while to realize that I was missing the () in the function call.

Not working

<Section message={message} />

Working

<Section message={message()} />

maybe this helps you, as it did to me!

Answer 2

You can use mixed arrays with strings and JSX elements (see the docs here):

<MyComponent text={["This is ", <strong>not</strong>,  "working."]} />

There's a fiddle here that shows it working: http://jsfiddle.net/7s7dee6L/

Also, as a last resort, you always have the ability to insert raw HTML but be careful because that can open you up to a cross-site scripting (XSS) attack if aren't sanitizing the property values.

Answer 3

On a client-side react application, there are a couple of ways of rendering a prop as a string with some html. One safer than the other...

1 - Define the prop as jsx (my preference)

const someProps = {
  greeting: {<div>Hello<a href="/${name_profile}">${name_profile}</a></div>}
}


const GreetingComopnent = props => (
  <p>{props.someProps.greeting}</p>
)

• The only requirement here is that whatever file is generating this prop needs to include React as a dependency (in case you're generating the prop's jsx in a helper file etc).

2 - Dangerously set the innerHtml

const someProps = {
  greeting: '<React.Fragment>Hello<a href="/${name_profile}">${name_profile}</a></React.Fragment>'
}

const GreetingComponent = props => {
  const innerHtml = { __html: props.someProps.greeting }
  return <p dangerouslySetInnerHtml={innerHtml}></p>
}

• This second approach is discouraged. Imagine an input field whose input value is rendered as a prop in this component. A user could enter a script tag in the input and the component that renders this input would execute this potentially malicious code. As such, this approach has the potential to introduce cross-site scripting vulnerabilities. For more information, refer to the official React docs

Answer 4

You could also use a function on the component to pass along jsx to through props. like:

 var MyComponent = React.createClass({

   render: function() {
    return (
      <OtherComponent
        body={this.body}
      />
    );
   },

   body() {
     return(
       <p>This is <strong>now</strong> working.<p>
     );
   }

});

var OtherComponent = React.createClass({

  propTypes: {
    body: React.PropTypes.func
  },

  render: function() {
     return (
        <section>
          {this.props.body()}
        </section>
     );
  },

});

Answer 5

From React v16.02 you can use a Fragment.

<MyComponent text={<Fragment>This is an <strong>HTML</strong> string.</Fragment>} />

More info: https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

Answer 6

@matagus answer is fine for me, Hope below snippet is helped those who wish to use a variable inside.

const myVar = 'not';
<MyComponent text={["This is ", <strong>{`${myVar}`}</strong>,  "working."]} />