Set Input value using a Ref in React

# Set Input value using a Ref in React

To set an input field's value using a ref in React:

Set the ref prop on the input element.
When a certain event is triggered, update the ref's value.
For example, ref.current.value = 'New value'.

App.js

Copied!
import {useRef} from 'react';

const App = () => {
  const inputRef = useRef(null);

  function handleClick() {
    // 👇️ Update input value
    inputRef.current.value = 'New value';

    // 👇️ Access input value
    console.log(inputRef.current.value);
  }

  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        id="message"
        name="message"
      />

      <button onClick={handleClick}>Log message</button>
    </div>
  );
};

export default App;

set input value using ref

The code for this article is available on GitHub

The example uses an uncontrolled input. Notice that the input field does not have an onChange prop or value set.

When using uncontrolled input fields, we access the input using a ref.

The useRef() hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

App.js

Copied!
const inputRef = useRef(null);

Notice that we have to access the current property on the ref object to get access to the input element on which we set the ref prop.

App.js

Copied!
function handleClick() {
  // 👇️ Update input value
  inputRef.current.value = 'New value';

  // 👇️ Access input value
  console.log(inputRef.current.value);
}

When we pass a ref prop to an element, e.g. <input ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

The useRef hook creates a plain JavaScript object but gives you the same ref object on every render. In other words, it's pretty much a memoized object value with a .current property.

It should be noted that when you change the value of the current property of the ref, no re-renders are caused.

Every time the user clicks on the button in the example, the value of the uncontrolled input gets updated.

If you need to clear the value of the input field, set its value to an empty string, e.g. inputRef.current.value = ''.

You shouldn't set the value prop on an uncontrolled input (an input field that doesn't have an onChange handler) because that would make the input field immutable and you wouldn't be able to type in it.

The code for this article is available on GitHub

If you try to access the ref's current property before its corresponding DOM element is rendered, you'd get a null or an undefined value back.

If you use TypeScript, you might get the error useRef "Object is possibly null"

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Set Input value using a Ref in React

# Set Input value using a Ref in React

# Additional Resources

Borislav Hadzhiev