How to render a react component from html string in ReactJS while setting in dangerouslysetinnerHtml?

Question

I am trying to load a component dynamically from html string. for example: I am having a html string like following which is from json.

 <div>This is some html content having a component of <Combobox params="option1,option2,option3"/></div>

here <Combobox params="option1,option2,option3"/> is a React component which i need to render as a HTML combobox with options 1,2 and 3 along with the texts. So, is there any way to do this kind of things in React.

vijayst · Accepted Answer · 2016-08-20 08:15:06Z

2

The entire JSX can be parsed to HTML using renderToString method.

import ReactDOMServer from 'react-dom/server';   

render() {
  const html = ReactDOMServer.renderToString(<div><Combobox /></div>);
  return (
    <div dangerouslySetInnerHTML={html}></div>
  );
}

answered Aug 20, 2016 at 8:15

vijayst

22.1k18 gold badges73 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

veerasuthan V Over a year ago

hai vijay above code shows me error beacuse in my json it is a html string with react component name. but here we need to pass it like a raw

Community · Accepted Answer · 2017-05-23 12:32:35Z

2

To build on vijayst's answer, if you're using redux/react-redux, and this happens to be a "connected" component, you'll need to import and pass the store along again.

import ReactDOMServer from 'react-dom/server';
import { Provider } from 'react-redux';
import store from '../redux/store';

render() {
  const html = ReactDOMServer.renderToString(<Provider store={store}><Combobox /></Provider>);
  return <div dangerouslySetInnerHTML={html}></div>;
}

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Apr 18, 2017 at 16:52

jabacchetta

51.1k11 gold badges71 silver badges82 bronze badges

Collectives™ on Stack Overflow

How to render a react component from html string in ReactJS while setting in dangerouslysetinnerHtml?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related