Wsrtjtyk

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;

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) => {...}