I have a custom component that is a card to display data from a section on a landing page. If I populate the data in the card on a page directly in the page editor it works fine. However I am displaying 8+ of these cards in a flex box so I really want to use a databinding to a query of the practice sections. As soon as i create the binding either thru a query or even just to one record it starts generating a hydration mismatch. Here is a video of the error:
Recording-20240731_200431.webm
Here is the code behind the custom component:
import Image from "next/image";
import Link from "next/link";
import { useState } from "react"; // Add missing import
function PracticeCard(props) {
const { name, title, thumbnail, altText } = props;
const [isHovered, setIsHovered] = useState(false); // Add missing state variable and useState hook
let imageValue = thumbnail?.length > 0 ? thumbnail : '/images/primary-care2.png';
let titleValue = title || 'Sample Practice';
let nameValue = name || 'sample-practice';
return (
<div className="flex h-80 w-72 xl:w-80">
<div id="image">
<img src={imageValue} alt={altText} className="h-60 w-full" />
</div>
<div
id="overlay"
className={`absolute bottom-0 ${isHovered ? 'h-1/3' : 'h-1/4'} w-72 xl:w-80 bg-primaryAccent hover:bg-secondaryAccent group`}
// onMouseEnter={() => setIsHovered(true)}
// onMouseLeave={() => setIsHovered(false)}
>
<div className="flex mx-auto">
<h3 className="text-primaryLight group-hover:text-primaryDark mx-auto px-4">
<a className="text-primaryLight" href={`/practices/${nameValue}`}>{titleValue}</a>
</h3>
</div>
</div>
</div>
);
}
export default PracticeCard;
FInally, here is a link to the github project for my site:
And the public key to my space is:
21c8ab133cb64454a96650df9ce1d9e5
Here is a link the page showing the problem:
Fast Refresh had to perform a full reload. Read more: