CODEWITHSUNDEEP
javascriptreactjsreact-dom
Return-1
Return-1

Reputation: 2449

Rendering components directly warning

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"));

Upvotes: 14

Views: 15466

Answers (2)

marzzy
marzzy

Reputation: 788

Here are 2 possible solutions:

  1. 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>

  1. 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);

Upvotes: 10

StackedQ
StackedQ

Reputation: 4139

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>

Upvotes: 33

Related Questions