Collecting user inputs is a key to building interactive web applications in React. All React apps use input fields in one way or another.

React docs recommend to store user inputs in the state. To do this, you need to update state values whenever user enters (or deletes) something in the field. In other words, you need to handle change events.

Let’s explore how to set onChange on fields in React.

Set onChange on text inputs in React

Change event occurs whenever users change their input. For example: enter or delete a value in the field, select or de-select a checkbox, select a different option from dropdown, or a different radio button and so on.

Changes in user inputs need to be reflected in the state. That’s why we need onChange event handler to track changes on <input> elements in React.

Here’s a basic example of how to set onChange on inputs in React.js:

Let’s identify three steps to set onChange on input elements in React:

1. Create two variables – name to store most recent user input, and setName to update it. By default, useState() returns two variables – a state value and a function to update it.
2. Create an <input> element. text is the most common type.
3. Set onChange on input elements to an event handler accesses current input value and updates the state.

Controlled input elements also need value attribute set to a state variable. This ensures that input gets its value from the state.

Whenever user enters or deletes something, our event handler accesses the current input value to update the state, which changes value in the input field.

onChange on checkbox inputs

Unlike normal text input fields, checkboxes have only 2 states: selected or not.

To create a checkbox input, we use the same <input> element as before, but set its type attribute to checkbox.

Once created, we can proceed to set onChange on checkbox type input in React.

In this code, we use useState to return a state variable checked (a boolean) and a function to update it.

Next, we set onChange on checkbox type <input>. Every time user selects or de-selects checkbox input, onChange will update the state variable.

Normally, we use value attribute to tie input element’s value to the state. For checkbox, we need to use checked attribute instead.

To access current value of checkbox type input, we access e.target.checked, not e.target.value like before.

In the example, we also have a label for the checkbox. Note that we use htmlFor, not for attribute to specify the relationship between checkbox and label. Our next article explores input labels and htmlFor attributes in React.

onChange on radio inputs

Radio buttons are another type of inputs that allow users to choose one of multiple options in a group. Radio buttons with the same name attribute are in the same group.

Let’s look at the code example:

In this example, we have three radio inputs with onChange event handler. All three belong to the same group, because they have the same value for the name attribute.

Every radio button also has a unique value and id. The value attribute specifies input value, and we use id to create a label for radio button.

We also define an event handler for change events, named handleRadioChange.

Finally, we set onChange prop to the handleRadioChange function. It updates animal state variable to the value of a radio button.

Every radio button has a Boolean checked attribute set to a condition that checks if currently selected value is equal to radio button value.

onChange on date inputs

<input> elements of date type allow you to collect dates in React.

Let’s explore how to set onChange on date type inputs in React.

<input type=”date” onChange={event => setDate(event.target.value)} />

To make this work, you also need to have a date state variable and a setDate function to update it. Then you can access current value of the date input on event.target.value and save it in the state.

How to get current value from input field

All event handlers can access a SyntheticEvent that contains information about the event and DOM elements involved.

In most examples, you see  e or event argument, which represents a SyntheticEvent instance automatically passed to event handlers in React. Usually current input value is found on event.target.value, but sometimes you also need to access event.target.checked to see current status of the checkbox.

Learn more about this in our article how to get input value in React.