How to Use onKeyPress Event in ReactJS?

The onKeyPress event in ReactJS occurs when the user presses a key on the keyboard but it is not fired for all keys e.g. ALT, CTRL, SHIFT, ESC in all browsers.

Approach

To use the onKeyPress event in React we will use the predefined onKeyPress event prop. We will be using a text input field, and pass an event handler in the onKeyPress prop and console log the pressed key using event.key property.

Steps to Create React Application

Step 1: Create a React application using the following command

npx create-react-app functiondemo

Step 2: After creating your project folder i.e. functiondemo, move to it using the following command

cd functiondemo

Project Structure:

It will look like the following.

Example: In this example, we are going to build an application that displays the key pressed in the input box.

// Filename - App.js

import React, { useState } from "react";

const App = () => {
	const [state, setState] = useState("");

	const handler = (event) => {
		// changing the state to the name of the key
		// which is pressed
		setState(event.key);
	};

	return (
		<div>
			<h1>Hi Geeks!</h1>
			<p>Key pressed is: {state}</p>

			{/* Passing the key pressed to the handler function */}
			<input type="text" onKeyPress={(e) => handler(e)} />
		</div>
	);
};

export default App;

Note: You can define your own styling in the App.css file.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: 

Conclusion

To use the onKeyPress event create a hander funtion and use it with the onKeyPress prop. Console log event.key in the handler to print which key has been pressed.

rbbansal

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS