How to use resetServerContext?

[revialim]

I currently ran into the problem, that causes my browser console to warn me with the following message, and weird behavior in my drag and drop. I load a list of objects dynamically and render these objects as draggable components.

Warning: Prop `data-react-beautiful-dnd-droppable` did not match. Server: "49" Client: "0"

I found this issue and would like to use resetServerContext to resolve my problem, but the documentation is very minimal. Is there an example how to apply it?

Currently I tried to use it before my get request in useEffect, but the warning still occurs.

useEffect(() => {
  resetServerContext(); 
  axios.get(...);
}, [])

What version of React are you using?

^16.8.4

What version of react-beautiful-dnd are you running?

^11.0.5

What browser are you using?

Chrome, Firefox

[Axedyson]

How did you use it?

[rfire12]

How did you use it?

You need to use resetServerContext if you're implementing server side rendering.
Call it right before renderToString in your client server.

https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/reset-server-context.md

[commanderz]

Another solution:

const [isBrowser, setIsBrowser] = useState(false);

useEffect(() => {
  setIsBrowser(process.browser);
}, [])

function Home() {
  return(
   <>
    {isBrowser ? <DragDropContext> { /* all rbd code */ } </DragDropContext> : null}
   </>
  )
}