_this2.props.moveShelf is not a function - reactjs

Question

I am learning React.
I am working on a Myreads book app project. My app renders fine at the start but the moment I click on the select tag, i get the above error message thrown up.
I thought it was a 'propTypes' issue at first and went ahead and installed prop-types but it is still not working.
Here is my cmp where there error occurs and my parent cmp where my method is defined:
// child component
import React from "react";
import Icon from "./icons/add.svg";
import SearchBar from "./SearchBar";
class Book extends React.Component {
render() {
return (
<div className="book">
<div className="book-top">
<div
className="book-cover"
style={{
width: 128,
height: 193,
backgroundImage: `${
this.props.book.imageLinks
? "url(this.props.book.imageLinks.thumbnail)"
: "Icon"
}`
}}
/>
<div className="book-shelf-changer">
<select
onChange={event =>
this.props.moveShelf(this.props.book, event.target.value)
}
value={this.props.book.shelf}
>
<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="remove">Remove</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;
And the parent component, where method is defined:
// parent component
import React from "react";
import SearchBar from "./SearchBar";
import MainPage from "./MainPage";
import { Route } from "react-router-dom";
import "./App.css";
import * as BooksAPI from "./BooksAPI";
class BooksApp extends React.Component {
constructor(props) {
super(props);
this.moveShelf = this.moveShelf.bind(this);
this.state = {
books: [],
query: "",
searchedBooks: []
};
}
componentDidMount() {
BooksAPI.getAll().then(books => {
this.setState({ books: books });
});
}
moveShelf = (book, shelf) => {
BooksAPI.update(book, shelf); //call update method here to stack books
BooksAPI.getAll().then(books => {
//to have books update dynamically -->
this.setState({ books: books });
});
};
updateQuery = query => {
this.setState({
query: query
});
this.updateSearchedBooks(query);
};
updateSearchedBooks = query => {
query
? BooksAPI.search(query).then(searchedBooks => {
/*fetch searchedbooks using the method defined in BooksAPI */
searchedBooks.error
? this.setState({ searchedBooks: [] })
: this.setState({ searchedBooks });
})
: this.setState({ searchedBooks: [] });
};
render() {
return (
<div className="app">
<Route
exact
path="/"
render={() => (
<MainPage
books={this.state.books} //calling all my books
moveShelf={this.moveShelf}
/>
)}
/>
<Route
path="/search"
render={() => (
<SearchBar
searchedBooks={this.state.searchedBooks}
moveShelf={this.moveShelf}
/>
)}
/>
</div>
);
}
}
export default BooksApp;

Answer 1

I guess that you do not pass moveShelf to Book inside MainPage and/or SearchBar components.
You do not need this.moveShelf = this.moveShelf.bind(this); when you define it as an arrow function moveShelf = (book, shelf) => {...}