How to Edit the Values of Input Controlled Components in React?

Sometimes, we want to edit the input values of controlled input components in a React component.

In this article, we’ll look at how to edit the value of value controlled input components in a React component.

Edit the Values of Input Controlled Components in React

We can edit the input values of multiple controlled input components by providing their own change handlers.

For instance, we can write:

class Form extends React.Component {
  constructor() {
    this.state = {};
  }

  changeFirstName(event) {
    const contact = this.state.contact;
    contact.firstName = event.target.value;
    this.setState({ contact });
  }

  changeLastName(event) {
    const contact = this.state.contact;
    contact.lastName = event.target.value;
    this.setState({ contact });
  }

  changePhone(event) {
    const contact = this.state.contact;
    contact.phone = event.target.value;
    this.setState({ contact });
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.changeFirstName.bind(this)} value={this.state.contact.firstName}/>
        <input type="text" onChange={this.changeLastName.bind(this)} value={this.state.contact.lastName}/>
        <input type="text" onChange={this.changePhone.bind(this)} value={this.state.contact.phone}/>
      </div>
    );
  }
}

We have 3 inputs, one for the first name, one for the last name, and one for the phone number.

Then in each handler, we get the values with event.target.value and then assign it to the state.

Each handler is passed into the onChange prop of each input.

We’ve to call bind(this) to return a function that has the component instance as the value of this .

value is set to the state that the event handler change.

This way, the inputted values will be displayed.

A better way to do it is to set the name dynamically with computed property keys.

For example, we can write:

class Form extends React.Component {
  constructor() {
    this.state = {};
  }


  handleChange(propertyName, event) {
    const contact = this.state.contact;
    contact[propertyName] = event.target.value;
    this.setState({ contact: contact });
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleChange.bind(this, 'firstName')} value={this.state.contact.firstName}/>
        <input type="text" onChange={this.handleChange.bind(this, 'lastName')} value={this.state.contact.lastName}/>
        <input type="text" onChange={this.handleChange.bind(this, 'phone')} value={this.state.contact.phone}/>
      </div>
    );
  }
}

We have one change handler for all 3 inputs.

Then we can pass in the field as the 2nd argument of bind to set that as the first argument of the handler.

Conclusion

We can edit the input values of multiple controlled input components by providing their own change handlers.