how to set state from on change for multiple events react

in my react form I need to save each data item into the state.

I currently have on change methods for each of the inputs but its a lot of very similar code and looks messy. (But it does work…)

Here is the code

class EnterMortgage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            repaymentType: '',
            propVal: '',
            bal: '',
            fullTerm: '',
            remainTerm: '',
            intRate: '',
        };
        this.handleRepaymentChange = this.handleRepaymentChange.bind(this);
        this.handlePropValChange = this.handlePropValChange.bind(this);
        this.handleBalChange = this.handleBalChange.bind(this);
        this.handleFullTermChange = this.handleFullTermChange.bind(this);
        this.handleRemainTermChange = this.handleRemainTermChange.bind(this);
        this.handleIntRateChange = this.handleIntRateChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

  

    handleRepaymentChange(event) {
        this.setState({ repaymentType: event.target.value });
    }
    handlePropValChange(event) {
        this.setState({ propVal: event.target.value });
    }
    handleBalChange(event) {
        this.setState({ bal: event.target.value });
    }
    handleFullTermChange(event) {
        this.setState({ fullTerm: event.target.value });
    }
    handleRemainTermChange(event) {
        this.setState({ remainTerm: event.target.value });=
    }
    handleIntRateChange(event) {
        this.setState({ intRate: event.target.value });
    }
    handleSubmit(event) {
            this.props.history.push('/EnterSavings', this.state);
    }

    // renders to display on page
    render() {
        return (
            <div>
            <div >
                    <p> Enter your mortgage details </p>
                </div>
                <div>
                    <form onSubmit={this.handleSubmit}>
                        <label>
                            Property Value {'\u00A3'}
    <input type="Number" name="propVal" onChange={this.handlePropValChange} />
                        </label>
                        <label>
                            Current Balance
    <input type="Number" name="bal"  onChange={this.handleBalChange}/>
                        </label>
                        <label>
                            Full Mortgage Term (months)
    <input type="Number" name="fullTerm"  onChange={this.handleFullTermChange} />
                        </label>
                        <label>
                            Remaining Mortgage Term (months)
    <input type="Number" name="remainTerm"  onChange={this.handleRemainTermChange}   />
                        </label>
                        <label>
                            InterestRate
    <input type="Number" name="intRate"  onChange={this.handleIntRateChange}  />
                        </label>
                        <label>
                            Repayment Method
          <select onChange={this.handleRepaymentChange}>
                                <option value="repayment">Repayment</option>
                                <option value="interest">Interest Only</option>
                                <option value="pap">Part and Part</option>
                            </select>
                        </label>
                        <input type="submit" value="Submit" />
                    </form>
                    </div>
                </div>
        );
    }

}
export default EnterMortgage;

Is there a way to refactor this rather than having multiple functions? I have tried to combined into one method but I couldn’t manage to get each item updated.

>Solution :

you can use a single handleChange method and update the state based on the name attribute of the input fields.

class EnterMortgage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      repaymentType: '',
      propVal: '',
      bal: '',
      fullTerm: '',
      remainTerm: '',
      intRate: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value,
    });
  }

  handleSubmit(event) {
    this.props.history.push('/EnterSavings', this.state);
  }

  render() {
    return (
      <div>
        <div>
          <p>Enter your mortgage details</p>
        </div>
        <div>
          <form onSubmit={this.handleSubmit}>
            <label>
              Property Value {'\u00A3'}
              <input type="Number" name="propVal" onChange={this.handleChange} />
            </label>
            <label>
              Current Balance
              <input type="Number" name="bal" onChange={this.handleChange} />
            </label>
            <label>
              Full Mortgage Term (months)
              <input type="Number" name="fullTerm" onChange={this.handleChange} />
            </label>
            <label>
              Remaining Mortgage Term (months)
              <input type="Number" name="remainTerm" onChange={this.handleChange} />
            </label>
            <label>
              InterestRate
              <input type="Number" name="intRate" onChange={this.handleChange} />
            </label>
            <label>
              Repayment Method
              <select name="repaymentType" onChange={this.handleChange}>
                <option value="repayment">Repayment</option>
                <option value="interest">Interest Only</option>
                <option value="pap">Part and Part</option>
              </select>
            </label>
            <input type="submit" value="Submit" />
          </form>
        </div>
      </div>
    );
  }
}