React warning render()

Question

why this happened? Warning: render(): Target node has markup rendered by React, but there are unrelated nodes as well. This is most commonly caused by white-space inserted around server-rendered markup.

<section id="container-wrapper"> <div data-reactid=".0.1.0.1"> loading..... </div> </section>

// App.js

ReactDOM.render(<App routes={routes} /> , document.getElementById('container-wrapper'));

Post your code. Maybe another framework made DOM modification. — Mr_Thorynque
– Mr_Thorynque, Commented Dec 3, 2015 at 8:26
If you're doing serverside rendering wrap your {{{content}}} in a DIV element. — Henrik Andersson
– Henrik Andersson, Commented Dec 3, 2015 at 9:54
I figured out the problem, it's careless that I add an attribute 'data-reactid' to the div in #container-wrapper. Thank you all the same! — zhoushx3
– zhoushx3, Commented Dec 3, 2015 at 10:10

aw04 · Accepted Answer · 2016-01-08 16:42:30Z

I ran into this issue rendering markup server-side. If you have something like this (ejs example):

<div id="app"> <%- markup %> </div>

Try removing all surrounding white space. The following got rid of the warning in my case.

<div id="app"><%- markup %></div>

thanks, I figured out that I added a data-reactid attribute in DIV which caused the problem.

Collectives™ on Stack Overflow

React warning render()

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related