Get the value of an Input on Button click in React

# Table of Contents

1. Get the value of an Input on Button click in React
2. Get the value of an Uncontrolled Input on Button click in React

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

Copied!
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;

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

Copied!
const [message, setMessage] = useState('');

Copied!
<input
  type="text"
  id="message"
  name="message"
  onChange={handleChange}
  value={message}
  autoComplete="off"
/>

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

Copied!
const handleClick = event => {
  event.preventDefault();

  // 👇️ Value of input field
  console.log('handleClick 👉️', message);
};

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

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

If you need to turn off autocomplete on an input field, check out the following article.

Alternatively, you can use an uncontrolled input field.

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

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

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.

Copied!
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;

The example above uses an uncontrolled input. Notice that the input field doesn't have an onChange prop or value set.

Copied!
<input
  ref={inputRef}
  type="text"
  id="message"
  name="message"
  autoComplete="off"
/>

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.

Copied!
const inputRef = useRef(null);

Copied!
function handleClick() {
  // 👇️ 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.

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.