dynamic HTML String to react component

Question

I would be getting dynamic html content from my template rendering which was rendered by other react components. How would I convert this html string to React component so that I can use the component in my render function. Note that I want to preserve react specific attributes used for diffing.

React.createClass( {
  var self = this;

  componentWillMountDown : function() {
    //htmlString is essentially huge dynamic one in my actual case
    var htmlString = "<div class='classDiv' react-id="0.1"><input type='text'/></div>";
    self.setState({responseString : htmlString});
    self.forceUpdate();
  },
    
  render: function() {
    var Response = this.state.responseString;
    //how would I return the react component as response?
    return (<Response/>); //does not work. err is it shd be valid react component
   }
});

I've tried converting htmlString to HTMLDocument object and recursively creating React.createElement in willmount callback and setting react component. however, the error is type toUpperCase is not defined.

Answer 1

A few hours ago, I published an html-to-react module in npm (https://www.npmjs.com/package/html-to-react) that may help you.

Please let me know if there's anything you need, I can certainly work with you to make the module more flexible.