'React 16 warning "warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>."
I'm using the React 16 beta (react-fiber) with server side rendering
What I am to understand this to mean?
warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>.
Solution 1:[1]
Looking for that error in the react code it seems that this happens when the SSR html can't be rehydrated.
So you are somehow initially rendering a different tree on the client vs the server.
Solution 2:[2]
Just change express response from
<body>
<div id="root">
${markup}
</div>
</body>
to
<body>
<div id="root">${markup}</div>
</body>
Remove space between tags
Solution 3:[3]
I faced the same warning while using Modal in Next.js. I was working to create a popup on the main page.
I found a solution. If the modal show state comes true first, it produces this warning. So I made it first undefined then I set it true after the page rendered . The code is below.
const [modalShow, setModalShow] = React.useState();
useEffect(() => {
if ( modalShow === undefined ) {
setModalShow(true)
}
}, [modalShow])
Solution 4:[4]
I had this issue, I solved it where I changed this:
<div>
<Header />
{children}
</div>
to this:
<div>
<Header />
<div>{children}</div>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | w00t |
| Solution 2 | |
| Solution 3 | |
| Solution 4 | Ethan |