real time populate search with react

Question

Right now my search function is I have to click the search icon to make it appear the result so I want to change that to real-time search. When I type the name in input it will auto-starting appear the user card for me

Here is my following code:

const [searchQuery, setSearchQuery] = useState("");

  const handleChange = (event) => {
    event.preventDefault();
    setSearchQuery(event.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await axios.get(
      `/api/v1/search/users/invite/${searchQuery}/${teamId}`
    );
    setInvitees(res.data[0]);
    setShowInvitees(!showInvitees);
  };
  useEffect(() => {
    if (searchQuery === "") {
      setInvitees([]);
    }
  }, [searchQuery]);

        <form onSubmit={handleSubmit}>
          <div className="invitees-search">
            <Button
              className="input invitees--search-icon"
              style={{ color: "white", backgroundColor: "#00B790" }}
              type="submit"
            >
              <SearchIcon />
            </Button>
            <input
              className="invitees--search_input"
              type="text"
              name="name"
              onChange={handleChange}
              placeholder="Name"
              aria-label="Search bar"
              pattern="^[a-zA-Z0-9 ]+"
              required
            />
          </div>
        </form>

How can I make it auto-populate when my search query length is >= 2 letters?

Don't forget to optimize your code by using `debounce` like this: https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js — Nguyễn Văn Phong, May 20 '21 at 09:50

Surjeet Bhadauriya · Accepted Answer · 2021-05-20T09:23:54.190

0

You can do so with the help of useEffect

Explanation:

I renamed your handleSubmit function to getInvitees

Calling getInvitees function when searchQuery length is more than or equal to 2

Solution

useEffect(() => {
   if(searchQuery === "") {
      setInvitees([]);
   }    
   if((searchQuery||'').length >= 2) {
      getInvitees();
   }    
}, [searchQuery]);

const getInvitees = async () => { // renamed handleSubmit function to getInvitees
   const res = await axios.get(`/api/v1/search/users/invite/${searchQuery}/${teamId}`);
   setInvitees(res.data[0]);
   setShowInvitees(!showInvitees);
};

edited May 20 '21 at 09:23

answered May 20 '21 at 09:16

Surjeet Bhadauriya

6,755
3
34
52

I'm getting error `TypeError: Cannot read property 'preventDefault' of undefined` – Nhan Nguyen May 20 '21 at 09:23
@NhanNguyen Remove that line, now no need of that. I updated the answer too. – Surjeet Bhadauriya May 20 '21 at 09:24
Can I ask! Why do we use `useEffect`? – Nhan Nguyen May 20 '21 at 09:28
You can also do the same code in handleChange but then you have to pass e.target.value to getInvitees function. This is because of the asynchronous nature of seState ( setSearchQuery(e.target.value) ). – Surjeet Bhadauriya May 20 '21 at 09:34
1

You can check this by console.log(searchQuery) in handleChange method. There, you will get old value when you type in. But inside useEffect callback you will get latest updated value always. – Surjeet Bhadauriya May 20 '21 at 09:35
How can I optimize my code with debounce ? – Nhan Nguyen May 20 '21 at 09:56
@NhanNguyen You can use https://www.npmjs.com/package/use-debounce – Surjeet Bhadauriya May 20 '21 at 10:10
Can you help me with this problem https://stackoverflow.com/questions/67624257/how-to-use-usedebounce-for-search-function-in-react/67624428#67624428 – Nhan Nguyen May 20 '21 at 21:49

real time populate search with react

1 Answers1

Solution