Skip to content

Instantly share code, notes, and snippets.

@chiefGui
Last active February 22, 2017 16:39
Show Gist options
  • Save chiefGui/41146de5eb79054f61faa5c5d2610432 to your computer and use it in GitHub Desktop.
Save chiefGui/41146de5eb79054f61faa5c5d2610432 to your computer and use it in GitHub Desktop.
import React from 'react'
const IMAGES = [1, 2, 3]
const Lightbox = ({imageUrl, onPrev, onNext}) => (
return (
<div>
<button onClick={onPrev}>Previous</button>
<img src={imageUrl} />
<button onNext={onNext}>Next</button>
</div>
)
)
class Home extends Component {
constructor () {
super()
this.prevImageOnLightbox = this.prevImageOnLightbox.bind(this)
this.nextImageOnLightbox = this.nextImageOnLightbox.bind(this)
}
state = {currentLightboxImage: IMAGES[1]}
prevImageOnLightbox () {
this.setState({currentLightboxImage: IMAGES[0]})
}
nextImageOnLightbox () {
this.setState({currentLightboxImage: IMAGES[2]})
}
render () {
const {currentLightboxImage} = this.state
return (
<Lightbox
imageUrl={currentLightboxImage}
onPrev={this.prevImageOnLightbox}
onNext={this.nextImageOnLightbox}
/>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment