Get the value of an Input on Button click in React

avatar

Borislav Hadzhiev

Last updated: Apr 23, 2022

banner

Photo from Unsplash

Get the value of an Input on Button click in React #

To get the value of an input on button click in React:

  1. Declare a state variable that tracks the value of the input field.
  2. Add an onClick prop to a button element.
  3. When the button is clicked, access the state variable.
App.js
import {useState} from 'react'; const App = () => { const [message, setMessage] = useState(''); const handleChange = event => { setMessage(event.target.value); console.log('value is:', event.target.value); }; const handleClick = event => { event.preventDefault(); // 👇️ value of input field console.log('handleClick 👉️', message); }; return ( <div> <input type="text" id="message" name="message" onChange={handleChange} value={message} autoComplete="off" /> <h2>Message: {message}</h2> <button onClick={handleClick}>Click</button> </div> ); }; export default App;

get input value on click

We used the useState hook to track the value of the input field.

We set the onChange prop on the field, so every time its value changes, the handleChange function is invoked.

We can access the value of the input element as event.target.value in the handleChange function.

The target property on the event object refers to the input element.

You can use the message state variable to access the value of the input field anywhere outside the handleChange function.

We set the onClick prop on the button element. Every time the button is clicked, the handleClick function is invoked.

To get the value of the input field on button click, we simply access the message state variable in our handleClick function.

Alternatively, you can use an uncontrolled input field.

To get the value of an uncontrolled input on button click in React:

  1. Initialize a ref using the useRef hook and set it on the input field.
  2. Add an onClick prop to a button element.
  3. When the button is clicked, access the value of the input field as ref.current.value.
App.js
import {useRef} from 'react'; const App = () => { const inputRef = useRef(null); function handleClick() { // 👇️ access input value console.log(inputRef.current.value); } return ( <div> <input ref={inputRef} type="text" id="message" name="message" autoComplete="off" /> <button onClick={handleClick}>Log message</button> </div> ); }; export default App;

get uncontrolled input value on button click

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

You can pass an initial value to an uncontrolled input with the defaultValue prop. However, this is not necessary and you can omit the prop if you don't want to set an initial value.

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.

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.

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 logged.

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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.