Input field not cleared after using useState with onClick-CodePudding

I have a React app, where I'm using an input field as a searchbar, which upon typing, returns a list of products, and upon clicking any product takes you to that product page. I want to clear the typed text in the searchbar after the redirection to new page has happened but I haven't been able to achieve this yet. I've tried many methods and went over similar posts, but I don't know what am I doing wrong as text is never cleared. I'm using Material UI for rendering the list and have imported everything as needed.

Below is my code:

Navbar component (contains searchbar)

const Navbar = () => {
  const [text, setText] = useState('');
  const [liopen, setLiopen] = useState(true);

  const getText = (text) => {
    setText(text);
    setLiopen(false);
  };

  const handleClick2 = (e) => {
    setText('');
    setLiopen(true)
  };

    return (
    <header>
      <nav>
       <div className="middle">
          <div className="nav_searchbar">
            <span className="search_icon">
              <SearchIcon id="search" />
            </span>
            <input
              type="text"
              onChange={(e) => getText(e.target.value)}
              name=""
              placeholder="Search for products, categories, ..."
              id=""
            />
          </div>
          {text && (
        <List className="extrasearch" hidden={liopen}>
          {products
            .filter((product) =>
              product.title.toLowerCase().includes(text.toLowerCase())
            )
            .map((product) => (
              <ListItem>
                <NavLink
                  to={`/getproductsone/${product.id}`}
                  onClick={(e) => {handleClick2(e)}}
                >
                  {product.title}
                </NavLink>
              </ListItem>
            ))}
        </List>
      )}
      </nav>
        </div>
    </header>
  );
};

export default Navbar;

CodePudding user response：

You need to set the value of the input if you want it controlled by the component state.

<input value={text}
  type="text"
  onChange={(e) => getText(e.target.value)}
  name=""
  placeholder="Search for products, categories, ..."
  id=""
/>