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

Question

(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.

Please show us your attempt. this isn't a free coding service. Consider reading How to Ask and tour. — 0stone0
– 0stone0, Commented May 18, 2022 at 15:37

Ahmed Ali · Accepted Answer · 2022-05-18 16:21:22Z

Please try this out

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,
      },
    ];

const filterWithAuthorAndTitle = (books, searchParams) => {
  return books.filter(({ author, title }) => {
          const testString = `${author}${title}`.toLowerCase();
        let authorName = author.toLowerCase();
    let bookTitle = title.toLowerCase();
          return testString.includes('m') && (authorName.startsWith('m') || bookTitle.startsWith('m'));
        })
}

let filteredBooks = filterWithAuthorAndTitle(books, 'm');

console.log(filteredBooks);

Som Shekhar Mukherjee · Accepted Answer · 2022-05-18 15:55:10Z

Every time the input text changes you can use Array.prototype.filter to filter out the books where the title or the author contains the input text.

Note: I've used String.prototype.includes to calculate the matches but you can use other String methods as well, like String.prototype.startsWith.

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 },
];

const App = () => {
  const [searchText, setSearchText] = React.useState("");

  const filteredBooks = books.filter(
    ({ author, title }) =>
      author.toLowerCase().includes(searchText.toLowerCase()) ||
      title.toLowerCase().includes(searchText.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        value={searchText}
        onChange={({ target }) => setSearchText(target.value)}
      />
      <ul>
        {filteredBooks.map(({ author, title }) => (
          <li key={title}>
            <strong>{title}</strong> by {author}
          </li>
        ))}
      </ul>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

dbuchet · Accepted Answer · 2022-05-18 15:36:50Z

0

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

answered May 18, 2022 at 15:36

dbuchet

1,6511 gold badge7 silver badges7 bronze badges

Comments

MarcoWriteCode · Accepted Answer · 2022-05-18 15:38:29Z

0

i think this could work:

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

answered May 18, 2022 at 15:38

MarcoWriteCode

1331 silver badge5 bronze badges

Comments

Zach Jensz · Accepted Answer · 2022-05-19 00:48:04Z

0

Try this filter function:

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

edited May 19, 2022 at 0:48

Zach Jensz

4,0986 gold badges19 silver badges32 bronze badges

answered May 18, 2022 at 15:36

Igor Loskutov

2,3842 gold badges24 silver badges45 bronze badges

Comments

Zach Jensz · Accepted Answer · 2022-05-19 01:10:19Z

0

Try the following:

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

edited May 19, 2022 at 1:10

Zach Jensz

4,0986 gold badges19 silver badges32 bronze badges

answered May 18, 2022 at 15:35

Sergei Kurochkin

1812 silver badges5 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related