BookItem.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class BookItem extends Component {
  static propTypes = {
    books: PropTypes.array.isRequired,
    updateShelf: PropTypes.func.isRequired
  }
  
  constructor(props) {
    super(props);
    this.updateShelf = this.props.updateShelf.bind(this);
  }
  
  renderDropdown() {
    const options = ['Currently reading', 'Want to read', 'Read', 'None'];
    return (
      <select onChange={this.updateShelf}>
        <option value="default" disabled>Move to...</option>
        {options.map((option) => {
          const slug = option.replace(' ', '-').toLowerCase();
          return (
            <option value={slug}>{option}</option>
          );
        })}
      </select>
    );
  }

  render() {
    return(
      <li key={this.props.id}>
        <div className="book">
          <div className="book-top">
            <div className="book-cover" ><img src={this.props.imageLinks.thumbnail} alt={this.props.title}/></div>
            <div className="book-shelf-changer">
              {this.renderDropdown()}
            </div>
          </div>
          <div className="book-title">{this.props.title}</div>
          <div className="book-authors">{this.props.authors ? this.props.authors.join(', ') : 'Unknown'}</div>
        </div>
      </li>
    );
  }
}

export default BookItem;