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 stackoverflow.com/questions/46539480/… and stackoverflow.com/questions/43922508/… — Lin Du
– Lin Du, Commented Dec 15, 2021 at 10:35

muserref · Accepted Answer · 2021-12-15 13:35:49Z

5

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, 2021 at 13:35

answered Dec 15, 2021 at 10:40

muserref

3612 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user17302724 Over a year ago

Thanks, Is there sorter way to do it like

Alloys Over a year ago

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

muserref Over a year ago

You can also use Formik library. When onsubmit the form formik has the resetForm method. npmjs.com/package/formik

user17302724 Over a year ago

your code reset my lists every single submit

user17302724 Over a year ago

this stackoverflow.com/a/70362482/17302724 solve my issue

|

MhkAsif · Accepted Answer · 2021-12-15 10:57:27Z

2

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>
)}

answered Dec 15, 2021 at 10:57

MhkAsif

6184 silver badges20 bronze badges

Comments

Lawal · Accepted Answer · 2023-01-11 01:28:45Z

0

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.

answered Jan 11, 2023 at 1:28

Lawal

511 silver badge3 bronze badges

Comments

ImpsImperial · Accepted Answer · 2021-12-15 10:36:29Z

-2

normaly i do is just resetting the state after the onClick

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

answered Dec 15, 2021 at 10:36

ImpsImperial

601 silver badge7 bronze badges

2 Comments

user17302724 Over a year ago

thanks, this way are not working

Community Over a year ago

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.

Collectives™ on Stack Overflow

How to clear input after submit with react

4 Answers 4

6 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related