Solvedreact select Select doesn't render isomorphically

Hello,

If I render this server side first, and then attach client side, like is done here:
https://github.com/mhart/react-server-example

You get a checksum error:
warning.js:44 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) r" id="react-select-2--value" data-react
(server) r" id="react-select-4--value" data-react

I think it is to do with the way the instancePrefix is being generated here:
https://github.com/JedWatson/react-select/blob/master/src/Select.js#L155
Could an option be added to set the instance id so it works isomophically?

19 Answers

✔️Accepted Answer

Use instanceId:
<Select instanceId="unique name" ...>

Other Answers:

Hi,

Sorry to post on a closed issue but I still have the same issue (like @Peterabsolon and @mattbroekhuis). The fix on the instance variable doesn't seem to be enough.I'm on react-select": "^1.0.0-rc.1".

Is it possible that the runtime used for server-side rendering could affect the persistance? I am using v8 3.16.14.15 (through the therubyracer gem).