Clear value into input using useState or useRef (React)

Question

I got hook:

const [myName, setMyName] = useState("");
const myNameRef = useRef();

Then I have form:

<form onSubmit={(e) => addVist(e, user.id)}>
 <input type="text" name="myName" ref={myNameRef} onChange={e => setMyName(e.target.value)} />
 <input type="submit" value="Run" />
</form>

And method:

const addVist = (e, userId) => {
        e.preventDefault();

        console.log(myName)
        //some code....

        //clear value form
        setMyName("");
        //setMyName('');
        //setMyName(e.target.value = "");
        //myNameRef.current.value("");

    }

But the setMyName("") is not working - still I see value inside input.

score 4 · Answer 1 · answered Nov 30 '20 at 09:37

4

Here is a complete example of clearing input using state OR a reference:

export default function App() {
  const [value, setValue] = useState("");
  const inputRef = useRef();
  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <input ref={inputRef} />
      <button
        onClick={() => {
          setValue("");
          inputRef.current.value = "";
        }}
      >
        Clear
      </button>
    </>
  );
}

Refer to Controlled VS Uncontrolled components.

answered Nov 30 '20 at 09:37

Dennis Vash

50,196
9
100
118

You actually asked how to reset with a ref as well – Dennis Vash Nov 30 '20 at 10:43
but if I don't need it I will not use it – 4est Nov 30 '20 at 10:47

score 2 · Accepted Answer · answered Nov 30 '20 at 09:20

2

You missed binding myName as value attribute of the input tag.

 <input type="text" name="myName" value={myName} ref={myNameRef} onChange={e => setMyName(e.target.value)} />

answered Nov 30 '20 at 09:20

wangdev87

8,611
3
8
31

score 1 · Answer 3 · answered Nov 30 '20 at 09:22

1

On your text input you should pass myName into the value attribute like so

<input type="text" name="myName" value={myName} ref={myNameRef} onChange={e => setMyName(e.target.value)} />

answered Nov 30 '20 at 09:22

Evan Christians

61
3

score 1 · Answer 4 · answered Nov 30 '20 at 09:59

1

You forgot to add myName as value.

<input type="text" name="myName" value={myName} ref={myNameRef} onChange={e => setMyName(e.target.value)} />

answered Nov 30 '20 at 09:59

Elif

141
13

Clear value into input using useState or useRef (React)

4 Answers4