Update Carousel.md

snippets/Carousel.md

@@ -2,24 +2,17 @@
 
 Renders a carousel component.
 
-Initially set `state.active` to `0` (index of the first item).
+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.
-Define a method, `setActiveItem`, which uses `this.setState` to change the state's `active` property to the index of the next item.
+Use the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.
-Define another method, `changeItem`, which is called by `setActiveItem` after updating the state each time and also when the component
+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.
-first renders (on `ComponentDidMount`).
+Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.
-In the `render()` method, destructure `state`, `style` and `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](https://reactjs.org/docs/react-api.html#cloneelement) and pass down rest
-`props` along with the computed styles.
 
 ```jsx
-class Carousel extends React.Component {
+function Carousel(props) {
-  constructor(props) {
+  const [active, setActive] = React.useState(0);
-    super(props);
+  let scrollInterval = null;
-    this.state = {
+  const style = {
-      active: 0
-    };
-    this.scrollInterval = null;
-    this.style = {
     carousel: {
       position: "relative"
     },
@@ -31,41 +24,27 @@ class Carousel extends React.Component {
       visibility: "visible"
     }
   };
-  }
+  React.useEffect(() => {
-  componentDidMount() {
+    scrollInterval = setTimeout(() => {
-    this.changeItem();
+      const { carouselItems } = props;
-  }
+      setActive((active + 1) % carouselItems.length);
-  setActiveItem = () => {
+    }, 2000);
-    const { carouselItems } = this.props;
+  });
-    this.setState(
+  const { carouselItems, ...rest } = props;
-      prevState => ({
-        active: (prevState.active + 1) % carouselItems.length
-      }),
-      this.changeItem
-    );
-  };
-  changeItem = () => {
-    this.scrollInterval = setTimeout(this.setActiveItem, 2000);
-  };
-  render() {
-    const { carouselItems, ...rest } = this.props;
-    const { active } = this.state;
-    const { visible, carousel, carouselItem } = this.style;
   return (
-      <div style={carousel}>
+    <div style={style.carousel}>
       {carouselItems.map((item, index) => {
-          const activeStyle = active === index ? visible : {};
+        const activeStyle = active === index ? style.visible : {};
         return React.cloneElement(item, {
           ...rest,
           style: {
-              ...carouselItem,
+            ...style.carouselItem,
             ...activeStyle
           }
         });
       })}
     </div>
   );
-  }
 }
 ```