Inputs are necessary to build dynamic web applications in React. It’s important to know how to get user inputs and work with them.

In this guide, we will break down code examples to show how to get input values in response to change, click, submit or other events in React. All examples are based on hooks and functional components.

Get input value in React

Let’s explore an example where we get value from input field in react.

Current user inputs are logged to the console.

In React, event handlers receive SyntheticEvent parameter. This is an object that describes the event and DOM element(<input>) as well. You can access current input value on e.target.value, where e represents the SyntheticEvent.

In React, input elements should get their value from the state. This is more consistent and React-friendly way to handle input values in React.

Click here to skip to a more advanced controlled inputs example and its step-by-step breakdown.

Input is a text type, so onChange event handler gets text value from this input.

Get input value on button click in React

Sometimes you need to get value in response to button click event in React.

The event handler function stays the same. You need to access current input value on e.target.value and use function returned by useState() hook to store input value in the state.

You need onChange to store text input value in the state.

Then you can create a button that displays input value when clicked. To do this, you’re going to need onClick event handler.

Get input value on submit in React

Sometimes you need to get input value(s) when users submit the form.

Forms usually have multiple input elements – text input fields, checkboxes, radio buttons, dropdowns, and so on.

Without further ado, let’s explore how to get multiple values from input in React. We will also show how to get a single text value from a form in React functional components.

Get multiple input values on form submit

Let’s say your form has multiple input elements – an input field, a dropdown, and a checkbox. Let’s see how to get multiple input values after users submit the form.

This is a long one, so let’s break down step by step.

First, let’s talk about how to get values from multiple input elements in the form.

We have a text input value, a dropdown, and a checkbox. You could create three state variables to store input value from each input. The most efficient approach is to create one variable – an object with three properties – to store user inputs from three inputs.

Input elements get their value from the state. onChange event handlers are set to a function that updates the object.

For example, text input asks users to enter guests’ name. We use onChange to get text input value and store it in the state:

onChange={(e) => setGuest({ ...guest, name: e.target.value })}

e argument stands for SyntheticEvent, which is passed to every event handler in React. We get current input value on e.target.value and use the setGuest() function to update the guest object.

We use spread syntax (three dots) to copy all existing properties from the guest object, and only change its name property to the text value we get from the input field.

Similarly, a dropdown that asks about the drink updates the drink property. A checkbox that asks if the guest is bringing anyone, updates the corresponding property.

To get input value from a checkbox, we access e.target.checked instead of e.target.value. checked property stores a Boolean value that represents whether the checkbox is selected or not.

Finally, we have a button that submits the form and executes the event handler for submit event.

const handleSubmit = (e) => {
    e.preventDefault();
    setGuestList([...guestList, guest]);
    setGuest({ name: "", plusOne: false, drink: "coca cola" });
  };

First, we call the e.preventDefault() method to stop the page from reloading.

Then use the setGuestList() function to update the guest list array. Once again, the spread syntax copies all existing records in the guestList array, and then adds current guest object. Note that onSubmit runs after user has entered all three inputs. At this time, guest object is filled with information.

Finally, we reset the guest object to reset inputs. Once the form is empty, users can enter information about another guest.

Get form input value on submit

Let’s look at an example when there’s only one input element in the form.

export default function App() {
  const [name, setName] = useState("");
  const [guestList, setGuestList] = useState([]);
  const handleSubmit = (e) => {
    e.preventDefault();
    setGuestList(guestList.push(name));
    setName("");
  };
  return (
    <div className="App">
      <form onSubmit={(e) => handleSubmit(e)}>
        Name to add to the guest list:
        <input value={name} type="text" onChange={(e) => setName(e.target.value)} />
      </form>
    </div>
  );
}

First, you need to set onChange on the <input> element. This will update the state value every time user enters or deletes something from the field.

We also need onSubmit to handle form submission. We define handleSubmit outside of JSX.

onChange takes name value and saves it in the guest list (guestList array).

If you want users to submit many names, the app needs to reset the input field after it is submitted.

const handleSubmit = (e) => {
    e.preventDefault();
    setGuestList(guestList.push(name));
    setName("");
  };

Normally, submitting the form causes the page to reload. We use preventDefault() to avoid this in React.

setGuestList() function stores submitted name in the guestList.

Once name is stored, we can use setName(“”) to reset the name to an empty string.

get input value from checkbox

A checkbox can have two states – selected or not selected. Like other inputs, you can use onChange to get current value from checkbox input in React.

You can access current value of a checkbox on e.target.checked property. This is different from e.target.value, which we use to get text values from inputs in React.

If checkbox is selected, e.target.checked will be true. If not, it will be false.

Handling Events