Update Carousel.md

snippets/Carousel.md

@@ -2,24 +2,18 @@
 
 Renders a carousel component.
 
-The `active` property on the component state is set to `0`th index as default.
-
+Initially set `state.active` to `0` (index of the first item).
 Use an object, `style`, to hold the styles for the individual components.
-
-Create a method, `setActiveItem`, which uses `this.setState` to change the state's `active` property to the index of the next item.
-Create another method `changeItem`, which is called by `setActiveItem` after updating the state each time and also when the component
+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 apply the combined style to the carousel item component accordingly.
-  
+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.
+`props` along with the computed styles.
 
 ```jsx
-
 class Carousel extends React.Component {
-   constructor(props) {
+  constructor(props) {
     super(props);
     this.state = {
       active: 0
@@ -38,25 +32,21 @@ class Carousel extends React.Component {
       }
     };
   }
-  
- componentDidMount() {
+  componentDidMount() {
     this.changeItem();
- }
-
- setActiveItem = () => {
-   const { carouselItems } = this.props;
-   this.setState(prevState => ({
-    active: (prevState.active + 1) % carouselItems.length
-    }),
-     this.changeItem
-   );
- };
-
- changeItem = () => {
-   this.scrollInterval = setTimeout(
-    this.setActiveItem, 2000);
- };
-
+  }
+  setActiveItem = () => {
+    const { carouselItems } = this.props;
+    this.setState(
+      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;
@@ -77,14 +67,17 @@ class Carousel extends React.Component {
     );
   }
 }
-
 ```
 
 ```jsx
-
- ReactDOM.render(<Carousel carouselItems = {[
-    <div>carousel item 1</div>,
-    <div>carousel item 2</div>,
-    <div>carousel item 3</div>]} />, document.getElementById('root'));
-    
+ReactDOM.render(
+  <Carousel
+    carouselItems={[
+      <div>carousel item 1</div>,
+      <div>carousel item 2</div>,
+      <div>carousel item 3</div>
+    ]}
+  />,
+  document.getElementById("app")
+);
  ```