Warning: Prop id did not match. Server: "sas_78372_tTPoc3REu9g_NbK7AQf2B" Client: "sas_78372_zGToWwkfzFKlIF36qF6gB"

[obrunodelgado]

Hello,

I need to use a random ID for an HTML element in the DOM (rendered in server side) and when the component did mount I need to interact with this element using it's identifier.

The problem is that the code will generate different IDs in the front-end and in the back-end.

How can I share a backend generated value with the frontend of a component that should appear more than once in the dom with different ids?

Frontend Code:

Backend Code:

In the nextJS I could use the dynamic feature to solve the problem.

[fivethreeo]

Set the shortid on a script tag. E.g. window.shortId = '${shortId}'; then use window.shortId in frontend

If multiple times you somehow have to use a deterministic way to map tthe ids to the component. Maybe hash the props except shortId and use that to get to the shortId?

[obrunodelgado]

I will need to generate the identifier multiple times and I can't figure it out how to generate a deterministic identifier because all the components contains the same properties. Basically I have this properties:

• Site Id
• Network Id
• Format Id
• Target
• Tag ID

The Tag ID is the only property that will change, because it should be unique for each HTML tag.

Even if I just define the random identifier in the backend rendering I see the Prop Id did not match. Pretty hard.

[fivethreeo]

Then put all props in a array in a script tag. Render each in a loop using window client side.

[fivethreeo]

https://github.com/thearnica/react-uid

This seems to be a solution to this problem