{"size": 2382, "ext": "js", "max_stars_repo_path": "src/Book.js", "max_stars_repo_name": "acareyup/myReadsApp", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Book.js", "max_issues_repo_name": "acareyup/myReadsApp", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/Book.js", "max_forks_repo_name": "acareyup/myReadsApp", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 44.9433962264, "max_line_length": 197, "alphanum_fraction": 0.3576826196}
import React, {Component} from 'react' 

class Book extends Component {


    render(){
        const {books, name, updateShelf} = this.props
        return(
            <div className="list-books-content">
            <div>
                <div className="bookshelf">
                <h2 className="bookshelf-title">{name}</h2>
                <div className="bookshelf-books">
                    <ol className="books-grid">
                        {books.map((book)=>(
                            <li key={book.id} >
                                <div className="book">
                                <div className="book-top">
                                    <div className="book-cover" key={book.id} style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks ? book.imageLinks.thumbnail : ''})` }}></div>
                                    <div className="book-shelf-changer">
                                    <select value={book.shelf} onChange={(evt) => updateShelf(evt, book)} >
                                        <option value="move" disabled>Move to...</option>
                                        <option value="currentlyReading">Currently Reading</option>
                                        <option value="wantToRead">Want to Read</option>
                                        <option value="read">Read</option>
                                        <option value="none">None</option>
                                    </select>
                                    
                                    </div>
                                </div>
                                <div className="book-title"  key={book.title}>{book.title}</div>
                                <div className="book-authors"  key={book.authors}>
                                        {book.authors && book.authors.length > 0 && book.authors.map((author, index) => (
                                                        <div key={index}>{author}</div>
                                        ))}
                                </div>
                                </div>
                            </li>
                            )
                        )}
                    </ol>
                </div>
                </div>
            </div>
            </div>
        )
         
            
    }
}

export default Book
