diff --git a/snippets/Carousel.md b/snippets/Carousel.md index 472a60d7d..7a7a344eb 100644 --- a/snippets/Carousel.md +++ b/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 item 1, -
carousel item 2
, -
carousel item 3
]} />, document.getElementById('root')); - +ReactDOM.render( + carousel item 1, +
carousel item 2
, +
carousel item 3
+ ]} + />, + document.getElementById("app") +); ```