title: Not able to search through mockData
body: <p>Hi i am working on an react project. in that project i am able to categorize the books through mock data that i created but not able to search through that mock data list</p>
  
  <p>the error is {(TypeError: _this5.props.onSearch is not a function) which is in SearchBooksInput component}</p>
  
  <p>1)below is my app.js file ( my mock data is in getAll which is in data file)
  '''
      import React, { Component } from 'react';
      import { Route, Link } from 'react-router-dom';</p>
  
  <pre><code>import './App.css';
  import {bindActionCreators} from 'redux';
  import getAll from "./data";
  import {connect} from 'react-redux';
  
  import {selectUser} from './actions/index'
  
  
   class BooksApp extends Component {
   bookshelves = [
    { key: 'currentlyReading', name: 'Currently Reading' },
   { key: 'wantToRead', name: 'Want to Read' },
   { key: 'read', name: 'Read' }
   ];
   state = {
   books: getAll,
   searchBooks: []
   };
   moveBook = (book, shelf) =&gt; {
   const updatedBooks = this.state.books.map(b =&gt; {
    if (b.id === book.id) {
      b.shelf = shelf;
    }
    return b;
   });
   this.setState({
    books: updatedBooks
   });
   };
   searchForBooks = query =&gt; {
   console.log(query);
   getAll.search(query).then(books =&gt; {
    this.setState({ searchBooks: books });
    });
    };
    resetSearch = () =&gt; {
    this.setState({ searchBooks: [] });
     };
  
    renderList() {
    return this.props.users.map((books) =&gt; {
      return (
          &lt;div
              key={books.id}
  
              onClick={() =&gt; this.props.selectUser(books)}
          &gt;
              &lt;br/&gt;
      &lt;br/&gt;
               &lt;br/&gt;
  
          &lt;/div&gt;
      );
    });
    }
  
    render() {
    const { books, searchBooks } = this.state;
    return (
    &lt;div className="app"&gt;
  
      &lt;Route
        exact
        path="/"
        render={() =&gt; (
          &lt;ListBooks
            bookshelves={this.bookshelves}
            books={books}
            onMove={this.moveBook}
          /&gt;
        )}
      /&gt;
      &lt;Route
        path="/search"
        render={() =&gt; (
          &lt;SearchBooks
            searchBooks={searchBooks}
            books={books}
            onSearch={books}
            onMove={this.moveBook}
            onResetSearch={this.resetSearch}
          /&gt;
        )}
      /&gt;
    &lt;/div&gt;
    );
    }
    }
    function mapStateToProps(state) {
    return {
    books: state.books
    };
    }
  
    function matchDispatchToProps(dispatch){
    return bindActionCreators({selectUser: selectUser}, dispatch);
    }
  
  
  
  
    class SearchBooks extends Component {
    render() {
    const { books, onSearch, onResetSearch, onMove, searchBooks } = this.props;
    console.log(books);
    return (
    &lt;div className="search-books"&gt;
      &lt;SearchBar onSearch={onSearch} onResetSearch={onResetSearch} /&gt;
      &lt;SearchResults
        books={books}
        onMove={onMove}
        searchBooks={searchBooks}
      /&gt;
    &lt;/div&gt;
    );
    }
    }
  
  
    const SearchBar = props =&gt; {
    const { onSearch, onResetSearch } = props;
     return (
    &lt;div className="search-books-bar"&gt;
    &lt;CloseSearchButton onResetSearch={onResetSearch} /&gt;
    &lt;SearchBooksInput onSearch={onSearch} /&gt;
    &lt;/div&gt;
    );
    };
  
    const CloseSearchButton = props =&gt; {
    const { onResetSearch } = props;
    return (
    &lt;Link to="/"&gt;
    &lt;button className="close-search" onClick={onResetSearch}&gt;
      Close
    &lt;/button&gt;
    &lt;/Link&gt;
    );
    };
  
    class SearchBooksInput extends Component {
    state = {
     value: '',
     books:getAll
     };
    handleChange = event =&gt; {
    const val = event.target.value;
    console.log(val)
    this.setState({ value: val }, () =&gt; {
    this.props.onSearch(val).bind(this);
     });
    };
    render() {
    return (
    &lt;div className="search-books-input-wrapper"&gt;
      &lt;input
        type="text"
        value={this.state.value}
        books={this.state.books}
        placeholder="Search by title or author"
        onChange={this.handleChange}
  
      /&gt;
      &lt;/div&gt;
      );
      }
      }
  
  
     const SearchResults = props =&gt; {
     const { books, searchBooks, onMove } = props;
     const updatedBooks = searchBooks.map(book =&gt; {
  
     books.map(b =&gt; {
     if (b.id === book.id) {
      book.shelf = b.shelf;
     }
     console.log(books)
     return b;
      });
     return book;
     });
     return (
     &lt;div className="search-books-results"&gt;
     &lt;ol className="books-grid"&gt;
      {updatedBooks.map(book =&gt; (
        &lt;Book
          key={book.id}
          book={book}
          shelf={book.shelf ? book.shelf : 'none'}
          onMove={onMove}
        /&gt;
      ))}
     &lt;/ol&gt;
     &lt;/div&gt;
     );
     };
     export default connect(mapStateToProps, matchDispatchToProps) 
     (BooksApp);
  </code></pre>
  
  <p>2) getAll file contain mock data </p>
  
  <pre><code>    const getAll = [
      title: 'React',
     authors: ['Nils Hartmann', 'Oliver Zeigermann'],
     imageLinks: {
      thumbnail:
      'http://books.google.com/books/content? 
     id=IOejDAAAQBAJ&amp;printsec=frontcover&amp;img=1&amp;zoom=1&amp;source=gbs_api',
     },
     id: 'IOejDAAAQBAJ',
     shelf: 'read',
     },
     {
     title: 'Satire TV',
      authors: ['Jonathan Gray', 'Jeffrey P. Jones', 'Ethan Thompson'],
     imageLinks: {
     thumbnail:
      'http://books.google.com/books/content?id=1wy49i- 
     gQjIC&amp;printsec=frontcover&amp;img=1&amp;zoom=1&amp;edge=curl&amp;source=gbs_api',
     },
     id: '1wy49i-gQjIC',
     shelf: 'read',
     },
     ]
     export default getAll;
  </code></pre>
  
  <p>3)link for github 
        <a href="https://github.com/Prashant1304/books" rel="nofollow noreferrer">https://github.com/Prashant1304/books</a></p>