reactjs - Rendering React components from strings -

i trying create single-page app blog using react. want store blog posts in database. typically, can store blog post in database html , render page, can't think of how work react. here code showing want do:

class blogpost extends react.component {   componentdidmount() {     // pretend string comes server     // , mycustomtextfield defined elsewhere     var blogpoststring = "<mycustomtextfield content="some content" />";     // render react components page     reactdom.render(blogpoststring, this.refs.someref);   }    render() {     return (       <div ref="someref"></div>     );   } } 

obviously doesn't work since need converted jsx, wondering if there way along these lines, or how else recommend doing it.

another option thought of store blog post array of json objects each entry includes name of component , attributes, creating them name this lookup table name component mapping.

ultimately feel none of ideas i've come ideal, suggestions how appreciated.

you can directly render mycustomtextfield in render method

 render() {     return (       <div ref="someref">        <mycustomtextfield content="some content" />       </div>     );   } 

demo