Pass React Component Inside Dangerouslysetinnerhtml

The server returns something like: content =

Hello world :smile: NICE !

- this is because we support markdown. Now I have a pars

Solution 1:

Upon playing around with the situation I discovered that you can actually pass use functional components and return string instead: https://github.com/missive/emoji-mart#using-with-dangerouslysetinnerhtml (Specific for my problem regarding emoji-mart)

So what I did with my other Components are the same, instead of calling a React component I created a function instead:

functiontestComponent(props) {
  const { style, className, children, html } = props;

  if (html) {
    return`<span style='${style}'  class='${className}'>${children || ''}</span>`;
  }

  return (
    <spanstyle="${style}"class="${className}">
      ${children || ''}
    </span>
  );
}

And called it as:

functiontestComponent(props) {
  const { content } = props; // content is a markdown and can be a stringified image tagreturntestComponent({ children: content, html: true });
}

And for the dangerouslySetInnerHTML:

(render function inside of your react component)

render() {
    const props = {
      dangerouslySetInnerHTML: {
        __html: testComponent(this.props.content),
      },
    };

    returnReact.createElement('div', props);

}

This is hackier, but less expensive than using:

renderToString()
renderToStaticMarkup()

Solution 2:

You should use React.renderToStaticMarkup(JSXInstance), in your case:

<p> Hello world ${React.renderToStaticMarkup(<Emojiemoji=":smile:" />)} <strong> NICE </strong> !</p>