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

Adding to the answer: If you intend to parse and you are already in JSX but have an object with nested properties, a very elegant way is to use parentheses in order to force JSX parsing:

const TestPage = () => (
  <Fragment>
    <MyComponent property={
    {
      html: (
        <p>This is a <a href='#'>test</a> text!</p>
      )
    }}>
    </MyComponent>
  </Fragment>
);

Answer 2

Parser from html-react-parser is a good solution. You just have to

• install it with npm or yarn
• import Parser from 'html-react-parser';

• call it with :

  <MyComponent text=Parser("This is <strong>not</strong> working.") />
  

  and it works well.