Hydration Errors
Answered
damsec posted this in #help-forum
damsecOP
Hi ! I'm fairly new to Next, I'm not really used to hydration errors yet, I have the following Warning :
and Here is the cartItem component
I guess I'm missing a <tr> tag but I think there is a closing one at the end so I don't really get it :/
Warning: Expected server HTML to contain a matching <tr> in <tbody>. <tbody className="divide-y divide-black">
{cart.items.map((item) => (
<CartItem product={item} key={item.id} />
))}
</tbody>and Here is the cartItem component
<tr className="text-[#1D2225]">
<td>
<input type="checkbox" />
</td>
<td className="flex flex-col lg:flex-row gap-4 py-6">
<Image
src={product.image}
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
width={125.93}
height={166}
className="bg-white"
alt=""
/>
<div className="uppercase text-[#1D2225]">{product.name}</div>
</td>
<td className="align-top py-6">
<button className="flex items-center mb-5 space-x-3 p-2 border border-black">
<div
onClick={() => {
removeProduct(product)
}}
>
</div>
</button>
<button className="flex items-center space-x-2">
<div
onClick={() => {
removeProduct(product)
}}
>
Remove
</div>
</button>
</td>
<td className="align-top py-6">
{currencyFormat(product.price * product.quantity)}
</td>
</tr>I guess I'm missing a <tr> tag but I think there is a closing one at the end so I don't really get it :/
Answered by Asian black bear
@damsec This can happen if your client is pulling cart stuff out of local storage outside of
useEffect3 Replies
Asian black bear
If, for example cart.items was defined on the client but empty (or a different length) on the server, there would be a missing <tr> tag
Asian black bear
@damsec This can happen if your client is pulling cart stuff out of local storage outside of
useEffectAnswer
@Asian black bear If, for example cart.items was defined on the client but empty (or a different length) on the server, there would be a missing <tr> tag
damsecOP
Okay I understood ! Thanks for the explanations I could fix it !