react error - _this2.props.updateShelf is not a function

I spend two days and I can't figure it out. I tried with bind or something but maybe I can not use it. So, please help me. I have another components but I have error with this part of code.
When I try move book from shelf to shelf I have this error:
Uncaught TypeError: Cannot read property 'bind' of undefined
at onChange (Book.js:12)
When I wasn't use bind I had this error - Book.js:12 Uncaught TypeError: _this2.props.updateShelf is not a function

import React, { Component } from "react";

class Book extends React.Component {
render() {
return (
<div className="book">
<div className="book-top">
<div
className="book-cover"
style={{
height: 192,
width: 128,
backgroundImage:
"url(" + this.props.book.imageLinks.thumbnail + ")"
}}
/>
<div className="book-shelf-changer">
<select
value={this.props.book.shelf}
onChange={event => {
this.props.updateShelf(event, this.props.book);
}}
>
<option value="" 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">{this.props.book.title}</div>
<div className="book-authors">{this.props.book.authors}</div>
</div>
);
}
}

export default Book;

import React from "react";
import { Route, Link, BrowserRouter } from "react-router-dom";
import * as BooksAPI from "./BooksAPI";
import Search from "./Search";
import "./App.css";
import BooksList from "./BooksList";

/* eslint-disable */
class BooksApp extends React.Component {
state = {
books:
};

updateShelf = (event, book) => {
BooksAPI.update(book, event.target.value).then(result => {
BooksAPI.getAll().then(books => {
this.setState({ books: books });
});
});
};

componentDidMount() {
BooksAPI.getAll().then(books => {
this.setState({ books: books });
});
}

render() {
return (
<BrowserRouter>
<div className="app">
<Route
path="/search"
render={() => <Search updateShelf={this.updateShelf} />}
/>

<Route
exact
path="/"
render={({ history }) => (
<BooksList
books={this.state.books}
updateShelf={this.updateShelf}
/>
)}
/>
<div className="open-search">
<Link className="" to="/search">
Search a book
</Link>
</div>
</div>
</BrowserRouter>
);
}
}

export default BooksApp;

import React from "react";
import { Route, Link } from "react-router-dom";
import Shelf from "./BookShelf";
import "./App.css";

/* eslint-disable */
class BooksList extends React.Component {
state = {
bookShelfs: [
{ id: "currentlyReading", title: "Currently Reading" },
{ id: "wantToRead", title: "Want to Read" },
{ id: "read", title: "Read" }
]
};

getBooksByFilterShelf = shelf => {
return this.props.books.filter(book => shelf.id === book.shelf);
};

render() {
return (
<div className="list-books">
<div className="list-books-title">
<h1>MyReads</h1>
</div>
<div className="list-books-content">
<div>
{this.state.bookShelfs.map(shelf => (
<Shelf
key={shelf.id}
shelf={shelf}
books={this.getBooksByFilterShelf(shelf)}
updateShelf={this.props.updateShelf}
/>
))}
</div>
</div>
</div>
);
}
}

export default BooksList;


BooksList

Book

Book

BooksList

Shelf

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.