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.

Aurelio · Accepted Answer · 2017-08-15 11:43:35Z

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, 2017 at 11:43

Aurelio

25.9k9 gold badges62 silver badges64 bronze badges

answered Jun 20, 2015 at 23:56

Mike

1,53011 silver badges16 bronze badges

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

4 Comments

Faisal Mq Over a year ago

How can I use htm-to-react in an Asp.Net MVC project? Looked over internet but cant find a simple answer to it.

Dave Cole Over a year ago

You'll likely have to configure ReactJS.net to use webpack, which is a royal pain. See: 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

Ruan Mendes Over a year ago

An answer should not just be a link, it should show the code required to answer the question

Vishala Ramasamy Over a year ago

This is useful. Thanks. Although the change of states inside mentioned components are not getting rerendered even though I'm using usestate. Any Help?

Phi Nguyen · Accepted Answer · 2015-06-08 18:41:07Z

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 8, 2015 at 18:41

answered Jun 8, 2015 at 17:44

Phi Nguyen

3,0561 gold badge16 silver badges26 bronze badges

1 Comment

Bharanidharan K Over a year ago

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

Mehdi Hosseini · Accepted Answer · 2019-07-18 12:19:32Z

2

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.

answered Jul 18, 2019 at 12:19

Mehdi Hosseini

1882 silver badges9 bronze badges

Collectives™ on Stack Overflow

dynamic HTML String to react component

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related