Lightbox.jsx

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}
      />
    )
  }
}