Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Replace <body> content

See original GitHub issue

Do you want to request a feature or report a bug? feature

What is the current behavior? When I use render() to replace the body content I got a warning message: 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. But if I’m creating a whole website, according to: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure It is better to have the <header> <main> <footer> elements, and these elements are said to be better directly under body

For example, it says: <main> is for content unique to this page. Use <main> only once per page, and put it directly inside <body>. Ideally this shouldn’t be nested within other elements.

So I think this is a common case to replace the whole content of the <body>

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior? Maybe remove the warning?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? “react-dom”: “^16.3.0”,

Issue Analytics

State:
Created 5 years ago
Reactions:5
Comments:5 (3 by maintainers)

Top GitHub Comments

4reactions

mustafaabobakrcommented, Dec 24, 2018

Is there any way to come up with `semantic HTML structure` in React !?

without any side effect !

<body id="root">
  <header></header>
  <main></main>
  <footer></footer>
</body>

2reactions

ffcactuscommented, Aug 16, 2018

Thanks But I also would like to render <header> and <footer>. So I’d better put them inside <main> ?

Top Results From Across the Web

replacing whole HTMLinside body tag - javascript

I want to replace the whole HTML inside body tag with some content and I use these codes inside both head and body...

Replace Body content with HTML source - gists · GitHub

Replace Body content with HTML source. GitHub Gist: instantly share code, notes, and snippets.

How to Replace the HTML Body Content - YouTube

How to Replace the HTML Body Content. Part of the series: HTML Basics. Replacing the HTML body content requires you to pay close...

How to replace the entire HTML node using JavaScript

Take the new document as a form of string(eg.. Str = ”). Use .open() method on document and this method takes 2 parameters(first...

.replaceWith() | jQuery API Documentation

A function that returns content with which to replace the set of matched elements. The .replaceWith() method removes content from the DOM and...

Troubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.

Start Free

Top Related Reddit Thread

No results found

Top Related Tweet

No results found

Top Related Dev.to Post

No results found