andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Carousel.md

Browse Source
This commit is contained in:
Angelos Chalaris
2019-01-28 19:50:38 +02:00
committed by GitHub
parent 1224092790
commit 07ff51629f
1 changed files with 30 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
snippets/Carousel.md
View File

@ -2,24 +2,18 @@
Renders a carousel component. 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. 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.
Create 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
Create another method `changeItem`, which is called by `setActiveItem` after updating the state each time and also when the component
first renders (on `ComponentDidMount`). 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.
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.
Render the carousel items using [React.cloneElement](https://reactjs.org/docs/react-api.html#cloneelement) and pass down rest 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 ```jsx
class Carousel extends React.Component { class Carousel extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
active: 0 active: 0
@ -38,25 +32,21 @@ class Carousel extends React.Component {
} }
}; };
} }
componentDidMount() {
componentDidMount() {
this.changeItem(); this.changeItem();
} }
setActiveItem = () => {
setActiveItem = () => { const { carouselItems } = this.props;
const { carouselItems } = this.props; this.setState(
this.setState(prevState => ({ prevState => ({
active: (prevState.active + 1) % carouselItems.length active: (prevState.active + 1) % carouselItems.length
}), }),
this.changeItem this.changeItem
); );
}; };
changeItem = () => {
changeItem = () => { this.scrollInterval = setTimeout(this.setActiveItem, 2000);
this.scrollInterval = setTimeout( };
this.setActiveItem, 2000);
};
render() { render() {
const { carouselItems, ...rest } = this.props; const { carouselItems, ...rest } = this.props;
const { active } = this.state; const { active } = this.state;
@ -77,14 +67,17 @@ class Carousel extends React.Component {
); );
} }
} }
``` ```
```jsx ```jsx
ReactDOM.render(
ReactDOM.render(<Carousel carouselItems = {[ <Carousel
<div>carousel item 1</div>, carouselItems={[
<div>carousel item 2</div>, <div>carousel item 1</div>,
<div>carousel item 3</div>]} />, document.getElementById('root')); <div>carousel item 2</div>,
<div>carousel item 3</div>
]}
/>,
document.getElementById("app")
);
``` ```