How can I search in react by taking in multiple object values?

Question

Pls see below my code,trying to search by comparing the input value with multiple object values.

<input type="search" placeholder="Search by Topic, Level or Subject..."
  onChange={(e) => {
    const searchGames = search.filter(item => item.Topic.toLowerCase().includes(e.target.value.toLowerCase()) ? item : null);
    setGame(searchGames);
    const searchGames2 = search.filter(item => item.Level.toLowerCase().includes(e.target.value.toLowerCase()) ? item : null);
    setGame(searchGames2);
    const searchGames3 = search.filter(item => item.Subject.toLowerCase().includes(e.target.value.toLowerCase()) ? item : null);
    setGame(searchGames3);
  }}
/>

Do You mean to say you need to search Topic, Level and Subject and combined its results? — Bhavesh Daswani
– Bhavesh Daswani, Commented Jul 8, 2022 at 16:48

Konrad · Accepted Answer · 2022-07-10 20:45:09Z

2

Seems like a more of programming question than react one.

As you may have noticed your example code lacked "or".

Try just checking if any of the conditions are true.

<input type="search" placeholder="Search by Topic, Level or Subject..."
  onChange={(e) => {
    const filteredGames = search.filter(item => {
      const topicIncludes = item.Topic.toLowerCase().includes(e.target.value.toLowerCase());
      const levelIncludes = item.Level.toLowerCase().includes(e.target.value.toLowerCase());
      const subjectIncludes = item.Subject.toLowerCase().includes(e.target.value.toLowerCase());
      return topicIncludes || levelIncludes || subjectIncludes;
    })
    setGame(filteredGames)
  }}
/>

Also, setting a state multiple times in a row is almost never a good idea.

answered Jul 10, 2022 at 20:45

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I search in react by taking in multiple object values?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related