Client VS server hydration error
Unanswered
Barbary Lion posted this in #help-forum
Barbary LionOP
<div className={`flex flex-col z-40 items-center justify-center stack justify-self-center self-end mb-4 gap-3 ${hidePrice} `}>
<div className={ ` bg-grey-light px-3 py-2 font-minecraft text-sm border border-r-black border-b-black border-t-white border-l-white flex items-center`}><Image src={eth} width={20} height={20} alt="background" />{item.price}</div>
<span className="font-minecraft text-sm truncate flex justify-center w-[138px]">{item.name}</span>
<span className="font-switzer text-xs truncate opacity-60">{item.brand}</span>
</div>This DIV is causing the errors:
Text content does not match server-rendered HTML.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
Error: There was an error while hydrating this Suspense boundary. Switched to client rendering.
2 Replies
Barbary LionOP
The issue is caused by item-brand, item.name, item.price.
Items is gotten from the props "box", which is passed down from the parent server component. This is a client component.
const [items, setItems] = useState(() => {
const initialItems = generateItems(box.case_items, 10);
return [...initialItems, ...initialItems]; // Concatenate the array with itself
});
const [items, setItems] = useState(() => {
const initialItems = generateItems(box.case_items, 10);
return [...initialItems, ...initialItems]; // Concatenate the array with itself
});