Create select dropdowns and set their default value in React

Every dynamic React application should give users some way to interact with the app. Most commonly we use standard input fields where users can enter anything. In this article, we will explore how to set up dropdowns so users can choose one of many provided options.

JSX is a templating language for React. In a lot of ways, it works exactly like HTML. Except one big difference – it’s actually JavaScript. Still, it allows you to create elements like <select> the same way you’d create them in standard HTML. At first glance, <select> element in React looks indistinguishable from the same element in HTML. One big difference is that JSX allows you to embed JavaScript expressions. You can do so by using curly braces {} around the JavaScript expression. This is necessary, so React knows what parts are static and which are dynamic.

How to set default value for <Select> elements in React

You can easily select one of the options by default. This is useful if you need to suggest one of the choices.

First, you need to set up a normal <select> in React. This involves multiple routine steps. Create a state variable and the function to update it. Then tie <select> element’s value to the state variable and set an onChange event handler. Then come up with a few options with unique value values. This may sound strange, but the value is an attribute for <option> element in React and HTML. Developers should set it to a unique value.

Next, simply add the defaultValue attribute to the <select> element to set its default value. You need to specify which option is going to be selected by default. To specify this, simply set defaultValue to the value of one of the options.

You can also set a placeholder as the default option. It will allow you to not use a label. Usually, placeholders look better. Check this guide to see a live demo of <select> default value.

There are a number of libraries that provide custom functionality. Even though you don’t need a custom component to set a default value, you might still need it for other advanced features like multi-select.

These custom components accept options as a prop. You create an array of objects with two properties – label and value. Every object describes one option. Then you set options prop on the select element itself.

When dealing with custom components like these, you can set default values the same way you set options. Use the same attribute defaultValue, but this time you need to set it to an object that describes an option that should be the default.

Generally, I wouldn’t recommend using libraries when you don’t need them. However, sometimes building a certain feature takes too long. Still, you might learn something by building it. I’ve learned a lot by looking at interesting libraries and trying to build their features myself.

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.

Summary

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