React Tips — Input Data Binding
Tags: webdev, programming, javascript, react
Published: 2021-01-23 19:55:07

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


React is the most used front end library for building modern, interactive front end web apps. It can also be used to build mobile apps.

In this article, we’ll look at how to add various form controls to our React app and set the state to the value of the control.

### Drop-Downs

Dropdowns is a common form input control element added to many apps. It’s the select element in HTML. In React, we have to set the value attribute of the select element to the value we selected in addition to adding the `onChange` handler to add a handler to get the selected value and set it as the state.

For instance, we write the following code to do that:

```
import React from "react";

export default function App() {
  const [fruit, setFruit] = React.useState("");
  return (
    <div className="App">
      <select value={fruit} onChange={e => setFruit(e.target.value)}>
        <option value="apple">apple</option>
        <option value="orange">orange</option>
        <option value="grape">grape</option>
      </select>
      <p>{fruit}</p>
    </div>
  );
}
```

In the code above, we have the `select` element, which has various options. The `value` prop is set to the `fruit` state, and we have a function that calls `setFruit` to update the value of `fruit` .

Then we have the value of `fruit` rendered inside the p element. The `onChange` handler will update `fruit` so that the selected value is displayed when we change the drop-down choice.

We can omit the value attribute’s value if the drop-down text and value are the same.

### Multiple Select Values

A select element can also be used to select multiple values. Instead of a drop-down, it’ll be a box where we can press Ctrl-click to select multiple values.

We can get the multiple selected values and then set them to a state by retrieving the values with the `selected` property set to `true` .

For instance, we can write the following to do that:

```
import React from "react";

export default function App() {
  const [fruits, setFruits] = React.useState("");
  const handleChange = e => {
    const options = e.target.options;
    setFruits(
      [...options]
        .filter(o => o.selected)
        .map(o => o.value)
        .join(",")
    );
  };
  return (
    <div className="App">
      <select multiple onChange={handleChange}>
        <option>apple</option>
        <option>orange</option>
        <option>grape</option>
      </select>
      <p>{fruits}</p>
    </div>
  );
}
```

In the code above, we set the `multiple` prop of `select` to `true` to enable multiple-choice selections in our select element.

Then in our `handleChange` function, we spread the `options` array-like object, which has all the choices.

Next, we keep the ones that are selected in a new array by calling `filter` with a callback that returns the ones with `selected` set to `true` . Then we map those into an arrays by passing in a callback which returns the `value` property.

Then we call `join` to join the array of strings into one string.

Therefore, when we select one or more items from the multiple select box, we get the selected choices displayed separated by a comma.

### Text Input

Like with the single select drop-down, we have to set the `value` prop to the state that holds the entered value and the `onChange` handler to the function which gets the inputted value and then set them to the state which is passed into the `value` prop.

For instance, we can write that as follows:

```
import React from "react";

export default function App() {
  const [fruit, setFruit] = React.useState("");
  return (
    <div className="App">
      <label>Favorite Fruit</label>
      <br />
      <input value={fruit} onChange={e => setFruit(e.target.value)} />
      <p>{fruit}</p>
    </div>
  );
}
```

In the code above, we have the `input` element. We pass in the `fruit` state to `value` . Therefore to update it with the inputted text, we have to call `setFruit` with `e.target.value` , which has the inputted value to update the `fruit` state.

The `fruit` state is then rendered in the p element. In the end, when we enter something in the text input, we’ll see the entered text displayed in the p element.

### Conclusion

We can add select elements and bind the selected value to a state variable with the `onChange` handler. Then we set the value prop with the state that we updated.

To add a select box that let users choose multiple options, we can add a select element and set the `multiple` prop to `true` . Then in the `onChange` handler, we get the options with the `e.target.options` array-like object. To use array options on it, we convert it to an array by using the spread operator.

Then we can select the selected properties by keeping the ones with `selected` property set to `true` .

Binding the inputted value of the text input to a state is done similarly to the way that we bind to select elements. We have an `onChange` handler, which calls the state change function returned from `useState` to update the state with the inputted value.