refactoring: Book as Stateless Functional Component

Author: konopkov

src/Book.js

@@ -1,36 +1,33 @@
-import React, {Component} from 'react';
+import React from 'react';
 
-class Book extends Component {
+const Book = (props) => {
 
-    render() {
+    const book = props.book;
 
-        const book = this.props.book;
+    return (
 
-        return (
-
-            <div className="book">
-                <div className="book-top">
-                    <div className="book-cover" style={{
-                        width: '100%',
-                        height: '100%',
-                        backgroundImage: `url(${book.imageLinks ? book.imageLinks.smallThumbnail : ''})`
-                    }}> </div>
-                    <div className="book-shelf-changer">
-                        <select value={book.shelf} onChange={(e) => this.props.onHandleChange(book, e.target.value)}>
-                            <option value="none" 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 className="book">
+            <div className="book-top">
+                <div className="book-cover" style={{
+                    width: '100%',
+                    height: '100%',
+                    backgroundImage: `url(${book.imageLinks ? book.imageLinks.smallThumbnail : ''})`
+                }}> </div>
+                <div className="book-shelf-changer">
+                    <select value={book.shelf} onChange={(e) => props.onHandleChange(book, e.target.value)}>
+                        <option value="none" 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 className="book-title">{book.title}</div>
-                <div className="book-authors">{book.authors}</div>
             </div>
+            <div className="book-title">{book.title}</div>
+            <div className="book-authors">{book.authors}</div>
+        </div>
 
-        )
-    }
-}
+    )
+};
 
 export default Book