React 16 warning "warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>."
ReactjsReact FiberReactjs Problem Overview
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>.
Reactjs Solutions
Solution 1 - Reactjs
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 2 - Reactjs
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 3 - Reactjs
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 - Reactjs
I had this issue, I solved it where I changed this:
<div>
<Header />
{children}
</div>
to this:
<div>
<Header />
<div>{children}</div>
</div>