Filtering items with dropdown in react - reactjs

Question

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???
Here is the code....
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
books: [],
userInput: "",
};
}
componentDidMount() {
this.setState({
books: BOOK_DATA,
});
}
handleInputChange = (event) => {
this.setState({
userInput: event.target.value,
});
};
handleCategoryChange = (event) => {
console.log(event.target.value.toLowerCase());
const books = [...this.state.books];
const categorizedBooks = books.filter((book) => {
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) => {
return book.name.toLowerCase().includes(userInput);
});
return (
<div className="App">
<Header />
<SearchBox change={(event) => this.handleInputChange(event)} />
<CategoriesandFilter
handleCategoryChange={(event) => this.handleCategoryChange(event)}
/>
<ShopTitle />
<BooksComponent books={searchedBook} />
</div>
);
}
}
export default App;

Answer 1

you are using the already filtered data for the next filter. you need to use the unfiltered data.
...
const categorizedBooks = BOOK_DATA.filter((book) => { // Use your unfiltered data here (BOOK_DATA)
return book.category === event.target.value.toLowerCase();
});
...