React 16 warning "warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>."
Just change express response from
<body> <div id="root"> ${markup} </div></body>to
<body> <div id="root">${markup}</div></body>Remove space between tags
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.
I am faced the same warning while using Modal in Next.js. I was working create a popup at the main page.
I found a solution. If modal show state come true first, it produce this warning. So i made it first undefined after then page rendered I set it true. Code is below.
const [modalShow, setModalShow] = React.useState(); useEffect(() => { if ( modalShow === undefined ) { setModalShow(true) } }, [modalShow])