title: Filtering items with dropdown in react
body: <p>So,I am creating a bookstore app.In that user can search and filter the books.The filtering of books works for one time and next it goes empty.I know where i was doing wrong.After filtering I was setting the state to the filtered state.How to correct it???</p>
  <p>Here is the code....</p>
  <pre><code>    class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            books: [],
            userInput: &quot;&quot;,
          };
        }
        componentDidMount() {
          this.setState({
            books: BOOK_DATA,
          });
        }
        handleInputChange = (event) =&gt; {
          this.setState({
            userInput: event.target.value,
          });
        };
        handleCategoryChange = (event) =&gt; {
          console.log(event.target.value.toLowerCase());
          const books = [...this.state.books];
      
          const categorizedBooks = books.filter((book) =&gt; {
            return book.category === event.target.value.toLowerCase();
          });
          //Problem here
          this.setState({
            books: categorizedBooks,
          });
        };
        render() {
          const { books, userInput } = this.state;
          //This one is for searching books
          const searchedBook = books.filter((book) =&gt; {
            return book.name.toLowerCase().includes(userInput);
          });
          return (
            &lt;div className=&quot;App&quot;&gt;
              &lt;Header /&gt;
              &lt;SearchBox change={(event) =&gt; this.handleInputChange(event)} /&gt;
              &lt;CategoriesandFilter
                handleCategoryChange={(event) =&gt; this.handleCategoryChange(event)}
              /&gt;
              &lt;ShopTitle /&gt;
              &lt;BooksComponent books={searchedBook} /&gt;
            &lt;/div&gt;
          );
        }
      }
      
      export default App;
  
  </code></pre>