title: real time populate search with react
body: <p>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</p>
  <p>Here is my following code:</p>
  <pre><code>const [searchQuery, setSearchQuery] = useState(&quot;&quot;);
  
    const handleChange = (event) =&gt; {
      event.preventDefault();
      setSearchQuery(event.target.value);
    };
  
    const handleSubmit = async (e) =&gt; {
      e.preventDefault();
      const res = await axios.get(
        `/api/v1/search/users/invite/${searchQuery}/${teamId}`
      );
      setInvitees(res.data[0]);
      setShowInvitees(!showInvitees);
    };
    useEffect(() =&gt; {
      if (searchQuery === &quot;&quot;) {
        setInvitees([]);
      }
    }, [searchQuery]);
  
          &lt;form onSubmit={handleSubmit}&gt;
            &lt;div className=&quot;invitees-search&quot;&gt;
              &lt;Button
                className=&quot;input invitees--search-icon&quot;
                style={{ color: &quot;white&quot;, backgroundColor: &quot;#00B790&quot; }}
                type=&quot;submit&quot;
              &gt;
                &lt;SearchIcon /&gt;
              &lt;/Button&gt;
              &lt;input
                className=&quot;invitees--search_input&quot;
                type=&quot;text&quot;
                name=&quot;name&quot;
                onChange={handleChange}
                placeholder=&quot;Name&quot;
                aria-label=&quot;Search bar&quot;
                pattern=&quot;^[a-zA-Z0-9 ]+&quot;
                required
              /&gt;
            &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  <p>How can I make it auto-populate when my search query length is &gt;= 2 letters?</p>