LightboxHome.jsx

import React from 'react'

class Lightbox extends Component {
  constructor () {
    super()

    this.prev = this.prev.bind(this)
    this.next = this.next.bind(this)
  }

  state = {currentImageUrl: null}

  componentWillMount () {
    const {currentImageUrl} = this.props

    this.setState({currentImageUrl: currentImageUrl})
  }

  prev () {
    const {images} = this.props

    this.setState({currentImageUrl: images[0]})
  }

  next () {
    const {images} = this.props

    this.setState({currentImageUrl: images[2]})
  }

  render () {
    const {currentImageUrl} = this.state

    return (
      <div>
        <button onClick={this.prev}>Previous</button>

        <img src={currentImageUrl} />

        <button onNext={this.next}>Next</button>
      </div>
    )
  }
}

class Home extends Component {
  prevImageOnLightbox () {
    this.setState({currentLightboxImage: IMAGES[0]})
  }

  nextImageOnLightbox () {
    this.setState({currentLightboxImage: IMAGES[2]})
  }

  render () {
    const IMAGES = [1, 2, 3]

    return (
      <Lightbox
        currentImageUrl={IMAGES[1]}
        images={IMAGES}
        onPrev={this.prevImageOnLightbox}
        onNext={this.nextImageOnLightbox}
      />
    )
  }
}