Implemeting search funcionality on iterated data from an API

So I created a sandbox of the thing I am working on Basically here I am fetching data from an API, I have iterated the data in Book Component, I have also Link in component/HoverBooks which is taking me to the details page/Book. I have iterated the data in the Search Component. I am trying to implement Search functionality of bookNames, which when they pressed are pushing me to the DetailsPage/Book. If something is wrong with sandbox please leave a comment. Thanks


I saw a bit of trouble in the way you prepare the data for your filter function. The key piece of code is

function filterBooks(book) {
    if (!searchValue.length) return true;
    return book.bookName?.toLowerCase().includes(searchValue.toLowerCase());
  return (
        .map((key) => data[key])
        .reduce((acc, curr) => acc.concat(curr), [])
        .map((book) => {
          return (
                onClick={() => {
                  history.push("/book/id", { book });
                {" "}
                {book.bookName}{" "}


Leave a Reply

Your email address will not be published. Required fields are marked *