Rendering components directly warning

Question

I've been getting the following warning for some time now and im rather uncertain as to what the problem actually is:

Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.

Some people have suggested using ReactDOM.render() which is exactly what i was doing in the first place, i used facebook's Create React App to base my app on.

Any clues?

EDIT: My index.js

ReactDOM.render(<App />, document.getElementById("root"));

marzzy · Accepted Answer

Here are 2 possible solutions:

Modify your HTML and add a <div> and use that for rendering (recommended):

ReactDOM.render(<App />, document.getElementById('react-app'));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React app</title>
</head>
<body>
    <div id="react-app"></div>
</body>
</html>

Create an element using JavaScript and append it to the body and use that to render:

var reactapp = document.createElement("div");
document.body.appendChild(reactapp);
ReactDOM.render(<App />, reactapp);

StackedQ · Answer

This problem happens if in your index.html the html body tag has root id.

In your index.html change:

<body id="root"></body>

to:

<body>
   <div id="root"></div>
</body>

Rendering components directly warning

Tags:

javascript

reactjs

react-dom

Return-1

2 Answers

marzzy

StackedQ

Recent Activity

Donate For Us

Rendering components directly warning

Tags:

javascript

reactjs

react-dom

Return-1

2 Answers

marzzy

StackedQ

Related questions

Recent Activity

Donate For Us