JIYIK CN >

To get the value of an input when the Enter key is pressed in React:

1. Set the property on the input field onKeyDown.
2. When the user presses a key, check if that key is Enter .
3. Access the value of the input field from the state variable.

import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  const handleKeyDown = event => {
    console.log(event.key);

    if (event.key === 'Enter') {
      event.preventDefault();

      // 👇️ access input value from state
      console.log(message);

      // 👇️ access input value from event object
      // console.log(event.target.value)

      console.log('User pressed Enter ✅');
    }
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        value={message}
        onChange={event => setMessage(event.target.value)}
        onKeyDown={handleKeyDown}
      />
    </div>
  );
};

export default App;

We use useStatethe hook to store the value of the input field.

When onKeyDownthe attribute is added to the input field, we only listen for keys pressed by the user while the input field has focus.

Every time the user presses a key, handleKeyDownthe function runs. We use the key property of the event object to check if the user pressed Enter.

Conditions if (event.key === 'Enter') {}All operating systems are covered - Windows, Mac, Linux, Android, etc.

If we don't want to keep track of the state of the input field, we can get its value on the target property of the event object.

const App = () => {
  const handleKeyDown = event => {
    if (event.key === 'Enter') {
      event.preventDefault();

      console.log('User pressed Enter ✅');

      // 👇️ access input value
      console.log(event.target.value);
    }
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onKeyDown={handleKeyDown}
      />
    </div>
  );
};

export default App;

We don't store the value of the input field, but get it using the event object.

The target property of the event refers to the input element.

We can see the keys the user might have pressed by visiting this MDN page .

onSubmitThis approach is useful when we need to run some logic when the user completes the input and don't want to use a form with an event handler.