Working with user inputs is probably the most important part of any interactive web application. Inputs are the gateway between your web application and the user. It’s important to make sure that they are easy to use and navigate. Let’s get started.
Difference between React elements and HTML elements
I get asked about this too much. As you know, React uses templating language JSX, which looks a lot like HTML. For example, you can write <div> element, which works similarly to <div> from HTML. The only difference is that in JSX, the <div> is just an imitation of the HTML element. Elements have the same name, but structurally they are different. All React elements are plain JavaScript objects.
Controlled components
Another important concept to understand when working with inputs in React. A component is controlled when all of its inputs are stored in the state. Changes in the input field update the state, and in turn, input fields get their values from the state. So you can look at state values to track all changes in the state.
Binding input values to the state is very useful for building dynamic applications. It allows you to validate user inputs while they are typing and to implement useful features like clear input fields after they are submitted.
Different types of inputs
First, we have a generic <input> element. This is a simple field where users can enter something. You can specify the type of value by setting the type attribute. Similar to HTML, you can set the type to text, number, email, and many other types. Oftentimes we also set the onChange event handler on <input> elements. Every time user changes the current input (deletes or adds something new), we want to update the corresponding state variable.
Another important input element is <select>. It is the element we use when we want to give users few select options to choose from. To implement this type of input, we need <select> element itself, and also <option> elements. If you’ve ever worked with <select> and <option> elements, you should know that they are not very readable. React community has created a react-select package, which allows you to easily implement the select feature. Instead of writing multiple <option> elements, you can simply pass an array of option labels and values to the select element.
There’s an article that discusses practical use cases of react-select and how to use it to implement advanced features. You can read it here:
https://simplefrontend.com/default-value-for-select-elements-in-react/
Other types of inputs like <textarea> are less commonly used. In general, textarea is useful for collecting large volumes of texts. If you think the user’s input is going to be multiple lines, then you will probably need <textarea> and not a normal input.
When working with input elements, you’re going to need onSubmit, onClick, and other event handlers to capture user inputs. You can also use a function to dynamically validate user inputs. React community also came up with a number of packages to validate user inputs.