React Tips — Input Data Binding

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.