How to clear input after submit with react

Question

how to clear the input inside this code after submit with the button

export default function Form({addTask}) {
const [taskInp, setTaskInp] = useState("")
return (
    <div>
        <input
            type="text"
            placeholder="Write here"
            onChange={e=>{
                setTaskInp(e.target.value)
            }}
        />
        <button onClick={()=> {
            addTask(taskInp)
        }}>Add Task</button>
    </div>
)}

I would love to know what is the recommended way please

See https://stackoverflow.com/questions/46539480/react-clearing-an-input-value-after-form-submit and https://stackoverflow.com/questions/43922508/clear-and-reset-form-input-fields/43922523 — Lin Du, Dec 15 '21 at 10:35

msefer · Accepted Answer · 2021-12-15T13:35:49.967

3

You can reset form elements when form submit.

  const handleSubmit = (event)=>{
    event.preventDefault();
    addTask(taskInp);
    event.target.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
        <input
            type="text"
            placeholder="Write here"
            onChange={e=>{
              setTaskInp(e.target.value);
            }}
        />
        <button type="submit">Add Task</button>
    </form>
  );

edited Dec 15 '21 at 13:35

answered Dec 15 '21 at 10:40

msefer

331
2
10

Thanks, Is there sorter way to do it like – Dec 15 '21 at 10:43
1

This goes against the one way data flow paradigm encouraged by react. Ideally you should be reseting the component state and let react handle the re-render. That however means making the input a controlled component – Alloys Dec 15 '21 at 10:45
You can also use Formik library. When onsubmit the form formik has the resetForm method. https://www.npmjs.com/package/formik – msefer Dec 15 '21 at 10:46
your code reset my lists every single submit – Dec 15 '21 at 10:52
when do you want it reset? – msefer Dec 15 '21 at 10:54
1

this https://stackoverflow.com/a/70362482/17302724 solve my issue – Dec 15 '21 at 11:00

score 2 · Answer 2 · answered Dec 15 '21 at 10:57

export default function Form({addTask}) {
const [taskInp, setTaskInp] = useState("")
return (
    <div>
        <input
            type="text"
            placeholder="Write here"
            value={taskInp}
            onChange={e=>{
                setTaskInp(e.target.value)
            }}
        />
        <button onClick={()=> {
            addTask(taskInp)
            setTaskInp("")
        }}>Add Task</button>
    </div>
)}

score 0 · Answer 3 · answered Jan 11 '23 at 01:28

import React,{useRef} from "react";                               
                                                  
export default function Form(){                                     
 const formRef = useRef(null)
 handleForm = async(event)=>{
  //handle form logic
  ...
  formRef.current.reset();                 
 }
return (
  <>
   <form onSubmit={handleForm}>
    ....
   </form>                                            
  </>                                                 
)
}

Building on msfers answer and refining it for typescript users, this solution worked for me.

score -2 · Answer 4 · answered Dec 15 '21 at 10:36

-2

normaly i do is just resetting the state after the onClick

  <button onClick={()=> {
      addTask(taskInp),
      setTaskInp("")
  }}>Add Task</button>

answered Dec 15 '21 at 10:36

ImpsImperial

60
1
6

thanks, this way are not working – Dec 15 '21 at 10:43
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 15 '21 at 12:28

How to clear input after submit with react

4 Answers4