Want to add data-* attribute in a div which will be used by third party JS lib React Next Js

user_7165841 0
Viewed 73
const speed :string =`{"speed": 0.2}`

<div className="section jarallax h-100vh"  data-jarallax={speed} 
    style={{backgroundImage: "url('/images/header-bg.jpg')"}} 
    id="home">
</div>

<Script src="./js/parallax.js"  strategy="beforeInteractive" />

It throws an Error: Hydration failed because the initial UI does not match what was rendered on the server.

next.js reactjs javascript
1 Answers

The error is thrown because there is a mismatch between the conponents that are affected by server-side rendering and the rest of your UI. what you could try is to remove the beforeactive attribute in the script tag.

If that doesn't help, please visit this link: https://nextjs.org/docs/messages/react-hydration-error

user_173189390
Related