From 99d6c6e8f0997a398f5f1882d800471c1d488720 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 18 Sep 2019 23:38:28 +0300 Subject: [PATCH] Resolve #51 --- snippets/Carousel.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/snippets/Carousel.md b/snippets/Carousel.md index 0c0b0f243..f1859eb43 100644 --- a/snippets/Carousel.md +++ b/snippets/Carousel.md @@ -7,7 +7,7 @@ Renders a carousel component. - Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item). - Use an object, `style`, to hold the styles for the individual components. -- Use the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`. +- Use the `React.useEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`. - Destructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly. - Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles. @@ -32,6 +32,7 @@ function Carousel(props) { const { carouselItems } = props; setActive((active + 1) % carouselItems.length); }, 2000); + return () => clearTimeout(scrollInterval); }); const { carouselItems, ...rest } = props; return (