set OnKeyDown on input elements in React

Handling events is one of the most important aspects of building apps in React. You need them to build dynamic applications and interactive features of a web application. In today’s article, we will talk about the onKeyDown event – how to set it on elements and how to handle them.

We often use onKeyDown to run a JavaScript function when users press down a key when they have selected an element. In practice, it is often used with <input> elements. On rare occasions, you can also use it on <div>, <span>, and other elements.

How to set onKeyDown on Elements in React

It’s essentially the same as setting any other prop or attribute. You need to set onKeyDown to a JavaScript function. Don’t forget to use curly braces, which allows you to embed JavaScript expressions in React. Don’t set onKeyDown to an expression that calls the function. Instead, set it to the function itself.

In React, event handlers automatically receive instance of SyntheticEvent as an argument. This is an object that contains information about the element and user input. Developers who want to handle onKeyDown event can access the specific key that was pressed down. This is often a very useful feature, because we need to perform a certain action when user presses a certain key. For example, you might want to allow users to submit their input by clicking ‘Enter’. This way, users can provide input without additional hassle. It’s always difficult to get users to provide their feedback. Allowing them to submit by clicking a certain key is a great feature for your UX.

Access specific pressed down key

To access specific key user pressed down, you need to access key property of the SyntheticEvent instance. Then you can use equality operator to make sure user pressed down a certain key. Use an if condition block to check a JavaScript expression. Then write what you need to do in the condition body. SimpleFrontEnd has a good example where they use this feature in practice.

Let’s look at an example:

let handleKeyDown = (e) => { if (e.key == "M") { console.log("User pressed M")} } };

This is a simple callback function that accepts one argument – e , which stands for SyntheticEvent. You can simply access e.key to access the specific key pressed down by user. In this case, we have set up an if condition to check if user pressed the ‘M’ key. If they did, we output corresponding message to the console.

You should set onKeyDown on <input> elements. Whenever user enters something new, onKeyDown will check keys that were pressed down. If any of those keys match the key specified in the condition, then you can run a function. You can also skip the if condition and simply run a function whenever user presses down any key.

You can also save user inputs whenever user presses Enter. Here’s an example where we use onKeyDown to submit input on enter in React.


Importance of having a user-friendly UI

When building websites, companies sometimes pay too much attention to content and not enough attention to website UI. What does UI mean though? It is short for the user interface. In other words, parts and features of the website that the user sees and interacts with. Web developers should always focus on making the website easy to use, easy to understand, and easy to navigate.

If users can not find what they’re looking for, they will get frustrated and leave. Most likely, they will never come back. This is the worst-case scenario for a business, especially one that relies on returning customers. In short, having amazing content means nothing without also having a user-friendly interface.

Does it affect your bottom line?

Yes, user-friendly websites are typically more profitable than those that are not. This is for a number of reasons. If the website or web application makes money primarily from ads, then more engagement means more time spent on the website, which means more ad revenue. Even if you don’t make money from ads, you want users to interact with your website. This allows you to study their habits and notice patterns to further improve your website and optimize it for users.

Important things to remember

Never forget that you (the creators of the website) may be different from your intended audience. For example, you might find it easy to work on a tech website, because you understand technology yourself. However, the people who will come to your website want to learn about technology, so they know very little. It’s important to not confuse them.

New users might not be familiar with the latest trends. Always assume that they’re seeing the website for the first time, and make the website usable for them regardless.

Web developers sometimes live in a bubble where everyone around them understands technology, at least to some extent. But you’d be surprised to find out that 90% of internet users are not good with technology.

Practical tips

If you have a website that is difficult to figure out, include a tutorial that introduces people to the most important pages and features.

Identify which pages are the most troublesome for your users and try to simplify them. For example, I run a small quiz website and a lot of my audience were struggling with the forms they had to fill out. I implemented a number of UI features to fix this.

My website was built in React, so I could easily implement these dynamic features. For example, after users signed up, I would redirect them to a dashboard page and give them access to the admin panel. Here is how to use useNavigate() to redirect users in React.

If the users had to work with the same form over and over, I cleared their inputs after every submission, so they didn’t have to delete their own inputs.


When building websites or applications, user-friendliness should be your main concern.