Search code examples
reactjsenterkeycodeonkeyup

React Synthetic Event: How to capture if Enter key is pressed?

Why does the event passed below retain 'event.target' value but not 'event.code'?

import React, { useState, useEffect } from 'react';
import moment from 'moment';
import { subscribeToTimer } from './api';
import './App.css';

function App() {
  function getInput(e) {
    console.log(e.target);
    console.log(e.code);
  }

  return (
    <>
      <p>Hello World!</p>
      <input type="text" name="message" className="message" placeholder="Type here..." onKeyUp={(e) => getInput(e)} />
    </>
  );
}

export default App;

How do we capture the 'Enter' key pressed for the input element in React?!

Solution

  • There is no code key to the event.

    You can use event.key === 'Enter' or event.keyCode === 13 check if the key pressed is Enter.