Library-render.js

renderCurrentPhoto(){
  const { photos, currentAt } = this.props;
  const { photoIndex } = this.state;
  if(photos.length) {
    // if we have photos loaded, render the current one
    return <Photo currentAt={currentAt} photo={photos[photoIndex]} nextPhoto={this.handleNextPhoto} />
  } else {
    return null; // we could add a loader here
  }
}

render() {
  return (<div className="library">
    {this.renderCurrentPhoto()}
    <div className="library-controls">
      <div className="library-controls--left">
        <svg fill="#FFFFFF" height="48" viewBox="0 0 24 24" width="48" onClick={this.prevPhoto}>
        </svg>
      </div>
      <div className="library-controls--center">
        <div className="library-controls--take-photo" onClick={this.switchPanel} />
      </div>
      <div className={`library-controls--right`}>
        <svg fill="#FFFFFF" height="48" viewBox="0 0 24 24" width="48" onClick={this.handleNextPhoto}>
        </svg>
      </div>
    </div>
  </div>);
}