Update Carousel.md

snippets/Carousel.md

@@ -2,22 +2,16 @@
 
 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) {
     super(props);
@@ -38,25 +32,21 @@ class Carousel extends React.Component {
       }
     };
   }
-  
   componentDidMount() {
     this.changeItem();
   }
-
   setActiveItem = () => {
     const { carouselItems } = this.props;
-   this.setState(prevState => ({
+    this.setState(
+      prevState => ({
         active: (prevState.active + 1) % carouselItems.length
       }),
       this.changeItem
     );
   };
-
   changeItem = () => {
-   this.scrollInterval = setTimeout(
-    this.setActiveItem, 2000);
+    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 = {[
+ReactDOM.render(
+  <Carousel
+    carouselItems={[
       <div>carousel item 1</div>,
       <div>carousel item 2</div>,
-    <div>carousel item 3</div>]} />, document.getElementById('root'));
-    
+      <div>carousel item 3</div>
+    ]}
+  />,
+  document.getElementById("app")
+);
  ```