REACT.js and render but using innerHTML of element rendering into?

Question

I have a need and I can't seem to overcome it.

Because my page uses both templating rendering AND react... I have this div that has an id, lets say 'foo'.

Now, I'd like to take the contents of "foo", THEN render my component with the contents of foo. My React component needs to have a certain look, but the page template has another.... does that make sense?

ie.

page renders with something like:

<div id="foo">
   <ul>
     <li>Item One</li>
     <li>Item two</li>
   </ul>
</div>

then in my jsx file, I have:

var fooElem = document.getElementById('foo');
var contents = fooElem && fooElem.innerHTML || '';

if(fooElem) {
    React.render(
      <MyCOMPONENT data={contents} />,
       fooElem
    );
}

I figure it would be an easy thing to just get the innerHTML of the div and then render a component in it with 'new' component content surrounding the 'innerhtml' that I grabbed. As you can see, I take a prop of "data" and I use that within my component to spit it out again, but in a different format. etc... that "foo" div is handed back by the backend, so I can't alter it other than "trying to get the innerHTML, manipulate it, and render a component into that space..".

Any help would be appreciated.

I get errors that the element has been modified and such.. and seems to just go in some kind of loop.

If you have access to the HTML and the innerHTML, why not just recode it all in React? What you are trying to do seems like a very bad anti-pattern. — Matthew Herbst
– Matthew Herbst, Commented Jul 28, 2015 at 8:29
why would it be an anti-pattern? It just seems like a normal operation that React should be able to handle. I have access to it, but I do not have access on what determines the content. — user1492442
– user1492442, Commented Jul 28, 2015 at 16:20
Sorry - I thought you meant that you had full access to actually creating what is inside foo. When you render the React component, do you want it alongside foo, or should it replace foo? — Matthew Herbst
– Matthew Herbst, Commented Jul 28, 2015 at 17:01
well, I want to basically take the contents and insert it into my component, then have my component render to div foo. basically, grab the contents of foo -- put that content into my component then render my component to elem foo. So, the user would see the "same thing" just but would be styled differently. — user1492442
– user1492442, Commented Jul 28, 2015 at 18:37

Matthew Herbst · Accepted Answer · 2015-07-28 19:46:18Z

2

You could do something along the lines of:

'use strict';
var React = require('react');

var myComponent = React.createClass({
  getInitialState: function() {
    return {
      content: ''
    };
  },
  // Learn more about React lifecycle methods: https://facebook.github.io/react/docs/component-specs.html
  componentWillMount: function() {
    // Get the content of foo
    var content = document.getElementById('foo').innerHTML;

    // Remove the old templated foo from the page
    // This assumes foo is a direct child of document.body
    document.body.removeChild(document.getElementById('foo'));

    this.setState({
      content: content
    });
  },
  render: function() {
    <div id={'foo'}>
      {this.state.content}
    </div>
  }
});

// This assumes you want to render your component directly into document.body
React.render(myComponent, document.body);

This will:

Read the contents of foo into the React component's state.
Remove the foo element from the page.
Render the new React component (with the content of foo) into the page.

edited Jul 28, 2015 at 19:46

answered Jul 28, 2015 at 18:58

Matthew Herbst

32.3k27 gold badges92 silver badges141 bronze badges

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

2 Comments

SuperUberDuper Over a year ago

Is there not a more simple way to assign the innerHtml of an object with a state prop?

Matthew Herbst Over a year ago

@SuperUberDuper not really. Ideally a React app should never manually modify the DOM - everything should be done via props and state

Collectives™ on Stack Overflow

REACT.js and render but using innerHTML of element rendering into?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related