I'm attempting to select a random slide from slides on page load, and display it in a hero section of a website.
But, the Image keeps getting out of sync with the Text & Button (e.g. slide 1 text and button, but slide 3 image are displayed), and I have no idea why that would happen?
If slide 1 is the slide, then the image, the text and button should all show slide 1's attributes.
export default function Slide() {
const router = useRouter();
const slides = [
{
img: "/slides/1.webp",
p: "1",
label: "1",
alt: "1",
url: "/1",
},
...2,...3,...4 // As above but slide 2,3,4
];
const slide = slides[Math.floor(Math.random() * slides.length)];
return (
<Flex w="full" h="100%">
<Flex
direction={{ base: "column", lg: "row" }}
justify={{ base: "center", lg: "center" }}
align="center"
flex="none"
boxSize="full"
>
<Flex
mt={{ base: "4", lg: "0" }}
w={{ base: "90%", lg: "30%" }}
direction="column"
justify="center"
align={{ base: "center", lg: "start" }}
order={{ base: 2, lg: 1 }}
>
<Text
color="white"
fontSize={{ base: "2xl", lg: "5xl" }}
fontWeight="black"
fontStyle="italic"
casing="uppercase"
textAlign={{ base: "center", lg: "left" }}
lineHeight="short"
>
{slide.p}
</Text>
<Button
size="lg"
mt="8"
color="white"
backgroundColor="ss.orange"
_hover={{ bg: "#CB2106" }}
fontWeight="bold"
rounded="none"
onClick={() => router.push(slide.url)}
>
{slide.label}
</Button>
</Flex>
<Flex
w={{ base: "90%", lg: "50%" }}
justify={{ base: "center", lg: "end" }}
order={{ base: 1, lg: 2 }}
>
<Image
width={800}
height={500}
layout="intrinsic"
src={slide.img}
alt={slide.alt}
placeholder="blur"
blurDataURL={slide.img}
priority
/>
</Flex>
</Flex>
</Flex>
);
}
The answer to this issue was to move the logic into a useEffect and use useState to track which slide we want to display.
const [slide, setSlide] = useState({
img: "/slides/1.webp",
p: "1",
label: "1",
alt: "1",
url: "/1",
})
useEffect(() => {
const slides = [
{
img: "/slides/1.webp",
p: "1",
label: "1",
alt: "1",
url: "/1",
},
...2,...3,...4 // As above but slide 2,3,4
];
const randomSlide = slides[Math.floor(Math.random() * slides.length)];
setSlide(randomSlide)
}, [])