Skip to content

Instantly share code, notes, and snippets.

@shubich
Last active January 16, 2018 20:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shubich/1c26df8e422ec3eefcae145d3dc436b0 to your computer and use it in GitHub Desktop.
Save shubich/1c26df8e422ec3eefcae145d3dc436b0 to your computer and use it in GitHub Desktop.
import React from 'react';
import { render } from 'react-dom';
import './style.css';
const cats = [
"http://www.pawculture.com/uploads/small-cat-breeds-card.jpg",
"http://www.pawculture.com/uploads/cats-small-places-card.jpg",
"http://facts.net/wp-content/uploads/2015/07/Cat-Facts.jpg"
]
class App extends React.Component {
constructor() {
super();
this.state = {
cur: 0
};
}
handleToTheLeft = () => {
this.setState(function (state, props) {
return {
cur: this.state.cur ? this.state.cur - 1 : cats.length - 1,
}
});
}
handleToTheRight = () => {
this.setState(function (state, props) {
return {
cur: (this.state.cur !== cats.length - 1)
? this.state.cur + 1
: 0,
}
});
}
render() {
return (
<div>
<button onClick={this.handleToTheLeft}>&lt;</button>
<img src={cats[this.state.cur]} alt="cat" />
<button onClick={this.handleToTheRight}>&gt;</button>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment