CODEWITHSUNDEEP
reactjssearchinputmaterial-uimenu
Asra Fatima
Asra Fatima

Reputation: 99

Search by selecting Field in Reactjs/Mui

i have search component that will search by username , fullname , email and organization , here's the code for it

const filterUser = (query, users) => {
if (!query) {
  return users;
} else {
  const filtered = users.filter((u) => {
    return (
      u.fullname.toLowerCase().startsWith(query.toLowerCase()) ||
      u.username.toLowerCase().startsWith(query.toLowerCase()) ||
      u.email.toLowerCase().startsWith(query.toLowerCase()) ||
      u.organization[0].toLowerCase().startsWith(query.toLowerCase())
    );
  });
  return filtered;
}

};

i want to update it user searched input field and i ahve made button with dropdown as shown on image : Display

now on selecting any field i will set Value field with that but how to deal with query ? i try something like this but it doen't work

 const [value , setValue] = useState("username")
const  filterUser = (query, users , value) => {
    if (!query) {
      return users;
    } else {
      const filtered = users.filter((u) => {
        return (
          u.value.toLowerCase().startsWith(query.toLowerCase()) ||
        );
      });
      return filtered;
    }
  };

Upvotes: 1

Views: 316

Answers (1)

BissellC
BissellC

Reputation: 36

u.value.toLowerCase().startsWith(query.toLowerCase()) is looking for a property on the "u" object named "value".

Instead, try using a property accessor like this u[value].toLowerCase().startsWith(query.toLowerCase())

Upvotes: 1

Related Questions