Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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>

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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}
      />
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading