Handle multiple input value change within an object

The requirement is handle the change of multiple input fields within the handleChange() method and the starter object that has it’s own properties, so input field values should be assigned to those properties within the starter object. So far, the handleChange() method results the following. Any ideas ? =(

Constructor:

constructor() {
    super();

    this.state = {
      starter: {
        title: '',
        ingredients: '',
        price: 0
      }
    };

    this.createStarter = this.createStarter.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

Handle change:

handleChange(evt) {
    this.setState({
      starter: {
        [evt.target.name]: evt.target.value
      }
    });
  }

Render:

render() {
    const { t } = this.props;
    const { starter: { title, ingredients, price } } = this.state;

        <input
          className="contact-control"
          type="text"
          name="title"
          value={title}
          onChange={this.handleChange}
          placeholder={t('starter-form.title')}
        />

        <input
          className="contact-control"
          type="text"
          name="ingredients"
          value={ingredients}
          onChange={this.handleChange}
          placeholder={t('starter-form.ingredients')}
        />
}

43 thoughts on “Handle multiple input value change within an object”

  1. 327275 903722Oh my goodness! a great post dude. Thanks Nevertheless My business is experiencing concern with ur rss . Do not know why Struggling to join it. Is there anybody obtaining identical rss problem? Anyone who knows kindly respond. Thnkx 156735

    Reply

Leave a Comment