Rendering a string as React component

Question

I want to render the react components with a string as the input which i am receiving dynamically from another page. BUt i will have the references for the react components. Here is the example

Page1:
-----------------------------
loadPage('<div><Header value=signin></Header></div>');

Page2:
--------------------------------
var React =require('react');
var Header = require('./header');

var home = React.createClass({

loadPage:function(str){ 

           this.setState({
             content : str 
           });

  },

 render : function(){

  return {this.state.content}
 }

});

In this example i am receiving Header component as string , and i have the reference of Header component in my receiving page . How can i substitute the string with the actual react component

Answer 1

This react-jsx-parser component looks like it will solve your problem

Answer 2

To render a react component using a string you can use.

var MyComponent = Components[type + "Component"];
return <MyComponent />;

For more information check the response here : React / JSX Dynamic Component Name