How to filter array of object depends on input onChange text (React)-CodePudding

(React Problem)

Let's say we have array of objects like this:

    const books = [
      {
        author: "Marcel Proust",
        title: "In Search of Lost Time",
        pageNumber: 123,
      },
      {
        author: "James Joyce",
        title: "Ulysses",
        pageNumber: 123,
      },
      {
        author: "Miguel de Cervantes",
        title: "Quixote",
        pageNumber: 123,
      },
      {
        author: "Herman Melville",
        title: "Moby Dick",
        pageNumber: 123,
      },
      {
        author: "William Shakespeare",
        title: "Hamlet",
        pageNumber: 123,
      },
    ];

Also we have an input and state like this:

    const [text, setText] = useState("");

    const handleOnChange = (event) => {
      setText(event.target.value);
    };

    <input value={text} onChange={handleOnChange} />;

Now, I would like to filter this array depends on input text, and [author | title] property.

Example:

If user types 'M', the array of object should look like this:

    const books = [
      {
        author: "Marcel Proust",
        title: "In Search of Lost Time",
        pageNumber: 123,
      },
      {
        author: "Miguel de Cervantes",
        title: "Quixote",
        pageNumber: 123,
      },
      {
        author: "Herman Melville",
        title: "Moby Dick",
        pageNumber: 123,
      },
    ];

...because the author or title start with letter M.

CodePudding user response：

try this:

const filteredBooks = books.filter(book => {
  return book.title[0] === text || book.author[0] === text;
})

CodePudding user response：

You should use a filter on your books array.

const filtered = books.filter(({author, title}) => author.includes(text) || title.includes(text)

This will filter with your text in ANY position on author or title. So in your example, if you type "S", you will have "William Shakespeare". If you want to search only from the begining, you can use startsWith instead of includes

CodePudding user response：

books.filter(({ author, title }) => author.toLowerCase().includes(text.toLowerCase()) || title.toLowerCase().includes(text.toLowerCase()))

CodePudding user response：

i think this could work:

books.filter((book) => {
                        if (YOURINPUTVALUE === '') {
                            return book
                        } else if (
                            books.author
                                .toLowerCase()
                                .includes(YOURINPUTVALUE.toLowerCase())
                        ) {
                            return book
                        }
                    })