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.

score 13 · Answer 1 · edited Aug 15 '17 at 11:43

13

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.

edited Aug 15 '17 at 11:43

Aurelio

24,702
9
60
63

answered Jun 20 '15 at 23:56

Mike Nikles

1,450
11
16

How can I use htm-to-react in an Asp.Net MVC project? Looked over internet but cant find a simple answer to it. – Faisal Mq Sep 18 '15 at 10:08
1

You'll likely have to configure ReactJS.net to use webpack, which is a royal pain. See: https://reactjs.net/guides/webpack.html - After trying this approach and succeeding (after a few days' work) I had the Asp.Net MVC project modified to use a RESTful API and ported the front-end to create-react-app – Dave Cole Sep 06 '17 at 18:08
An answer should not just be a link, it should show the code required to answer the question – Ruan Mendes Apr 06 '20 at 12:49
This is useful. Thanks. Although the change of states inside mentioned components are not getting rerendered even though I'm using usestate. Any Help? – Vishala Ramasamy May 15 '22 at 10:59

Phi Nguyen · Answer 2 · 2015-06-08T18:41:07.737

9

Because you store your component as string so you have to use dangerouslySetInnerHTML. This is my suggestion. I hope someone else will have the better answer. :)

    render: function() {
    var self = this;
    var Response = React.createClass({
        render: function(){
        return (<div dangerouslySetInnerHTML={{__html: self.state.responseString}}></div>)
        }
    });
    return (
            <Response />
    )
   }

edited Jun 08 '15 at 18:41

answered Jun 08 '15 at 17:44

Phi Nguyen

3,046
14
26

3

Just edited the question. Since I want to preserve react specific attributes I won't be able to use dangerously SetInnerHtml. Is there a programmatic way of creating react components from HTML string – Bharanidharan K Jun 08 '15 at 18:14

score 2 · Answer 3 · answered Jul 18 '19 at 12:19

You can use React HTML Parser. Here is the link React HTML Parser

It's a utility for converting HTML strings into React components. Avoids the use of dangerouslySetInnerHTML and converts standard HTML elements, attributes and inline styles into their React equivalents.

dynamic HTML String to react component

3 Answers3

Linked