How to parse html to React component?

Question

This is my senario :
1. Application request CMS(Content management system) for page contents.
2. CMS return "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>"
3. Application consume the content, render corresponding component with data provided in attribute.

I can't figure out how to do step 3 in React way, any advice is appreciated.

Thanks @Glenn Reyes, here's a Sandbox to show the problem.

import React from 'react'; import { render } from 'react-dom';  const SpecialButton = ({ children, color }) => (   <button style={{color}}>{children}</button> );  const htmlFromCMS = ` <div>Hi,    <SpecialButton color="red">My Button</SpecialButton> </div>`;  const App = () => (   <div dangerouslySetInnerHTML={{__html: htmlFromCMS}}>   </div> );  // expect to be same as // const App = () => ( //   <div>Hi,  //     <SpecialButton color="red">My Button</SpecialButton> //   </div> // );  render(<App />, document.getElementById('root')); 

Here is a live demo made by Vuejs. String "<div v-demo-widget></div>" could be treat as Vuejs directive and rendered. Source Code.

Answer 1

You probably want to look deeper into dangerouslySetInnerHTML. Here is an example how to render HTML from a string in a React component:

import React from 'react'; import { render } from 'react-dom';  const htmlString = '<h1>Hello World! 👋</h1>';  const App = () => (   <div dangerouslySetInnerHTML={{ __html: htmlString }} /> );  render(<App />, document.getElementById('root')); 

Full example here: https://codesandbox.io/s/xv40xXQzE

Read more about dangerouslySetInnerHTML in the React docs here: https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

Answer 2

You can use the react-html-parser in case you don't want to use dangerouslySetInnerHTML attribute

import React from 'react'; import { render } from 'react-dom'; import ReactHtmlParser from 'react-html-parser';  const SpecialButton = ({ children, color }) => (   <button style={{color}}>{children}</button> );  const htmlFromCMS = ` <div>Hi,    <SpecialButton color="red">My Button</SpecialButton> </div>`;  const App = () => (   <div>      {ReactHtmlParser(htmlFromCMS)}   </div> );   render(<App />, document.getElementById('root')); 

Happy Coding!!!