Update Carousel.md

snippets/Carousel.md

@@ -2,70 +2,49 @@
 
 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.
-Define another method, `changeItem`, which is called by `setActiveItem` after updating the state each time and also when the component
-first renders (on `ComponentDidMount`).
-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.
+Use the `React.setEffect()` 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.
 
 ```jsx
-class Carousel extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      active: 0
-    };
-    this.scrollInterval = null;
-    this.style = {
-      carousel: {
-        position: "relative"
-      },
-      carouselItem: {
-        position: "absolute",
-        visibility: "hidden"
-      },
-      visible: {
-        visibility: "visible"
-      }
-    };
-  }
-  componentDidMount() {
-    this.changeItem();
-  }
-  setActiveItem = () => {
-    const { carouselItems } = this.props;
-    this.setState(
-      prevState => ({
-        active: (prevState.active + 1) % carouselItems.length
-      }),
-      this.changeItem
-    );
+function Carousel(props) {
+  const [active, setActive] = React.useState(0);
+  let scrollInterval = null;
+  const style = {
+    carousel: {
+      position: "relative"
+    },
+    carouselItem: {
+      position: "absolute",
+      visibility: "hidden"
+    },
+    visible: {
+      visibility: "visible"
+    }
   };
-  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}>
-        {carouselItems.map((item, index) => {
-          const activeStyle = active === index ? visible : {};
-          return React.cloneElement(item, {
-            ...rest,
-            style: {
-              ...carouselItem,
-              ...activeStyle
-            }
-          });
-        })}
-      </div>
-    );
-  }
+  React.useEffect(() => {
+    scrollInterval = setTimeout(() => {
+      const { carouselItems } = props;
+      setActive((active + 1) % carouselItems.length);
+    }, 2000);
+  });
+  const { carouselItems, ...rest } = props;
+  return (
+    <div style={style.carousel}>
+      {carouselItems.map((item, index) => {
+        const activeStyle = active === index ? style.visible : {};
+        return React.cloneElement(item, {
+          ...rest,
+          style: {
+            ...style.carouselItem,
+            ...activeStyle
+          }
+        });
+      })}
+    </div>
+  );
 }
 ```