below functional component part of the code can only be rendered if the useState variable (selected) is true , i was trying to make this part to be rendered with animation using framer-motion , any suggestion how this can be done? (been using styled component) … appreciate it
const Animal = ({ id, image, title, subtitle }) => {
const [selected, setSelected] = useState(false);
const adjustableWidth = selected ? 400 : 200;
return (
<AnimalBox
key={id}
onMouseEnter={() => {
setSelected(true);
}}
onMouseLeave={() => {
setSelected(false);
}}
style={{ height: adjustableWidth }}
>
<AnimalImage src={image} alt={title} />
{selected && (
<>
<AnimalTitle>{title}</AnimalTitle>
<AnimalSubtitle>{subtitle}</AnimalSubtitle>
</>
)}
</AnimalBox>
);
};
export default Animal;