Error: Hydration failed because the initial UI does not match what was rendered on the server.
Answered
neon posted this in #help-forum
neonOP
I do understand why this error occured, it's because of this part:
In here, there's a
Now, how do I make it work?
<p className="text-xl text-white px-6 py-4 w-[45%]">
A dedicated{" "}
<Tooltip tooltip="My cool tooltip!">
<span className="text-primary">programmer</span>
</Tooltip>{" "}
with a penchant for turning ideas into reality through elegant lines
of code. Embracing challenges and seeking innovative solutions in the
ever-evolving landscape of technology.
</p>
In here, there's a
Tooltip
tag inside a p
tag, and the tooltip tag contains divs: return (
<div onMouseEnter={({ clientX }) => ...>
<span
ref={tooltipRef}
className="..."
>
{tooltip}
</span>
{children}
</div>
);
Now, how do I make it work?
5 Replies
joulev
Try changing the div to span
Answer
neonOP
wow, it works. Thank you so much!
oh
joulev
Np, glad it helped
neonOP
ðŸ‘