How to set value in input field to empty by click on a button in react js?-CodePudding

How to set value in input field to empty by click on a button in react js ? I thought it is an easy step to empty an input field by click on button, though it is easy but my code is not working. I m using Ant design onSearch input field. I want that when I click on CloseCircleOutlined button, the input field must be set to empty. Kindly help me to solve this issue. Here is my code:

const [search, setSearch] = useState("");
  
  
  const handleChange = (value) => {
    setSearch(value);
  }
  
  const onSearch = () => {
       if(search){
        mutation()
        setisSearched(true);
  }
      setCurrentPage(1);
    }
    

const handleCloseButton = (e)=>{
setSearch(" ")

  }
    
   <SearcI want thath
      enterButton="Search"
      size="large"
      placeholder="Search Product"
      className="search_bar"
      onSearch={onSearch}
      onChange={(e) => handleChange(e.target.value)}
      />
      
         <Text>Showing results for {`"${search} "`}  <CloseCircleOutlined onClick={handleCloseButton}/></Text>

CodePudding user response：

I guess you already set to empty string but you do not use that parameter in your search component. You should use value

<Search
      enterButton="Search"
      size="large"
      placeholder="Search Product"
      className="search_bar"
      onSearch={onSearch}
      onChange={(e) => handleChange(e.target.value)}
      value={search}
      />