How to refactor this Javascript code into React?

Question

I have this Javascript function that takes 4 inputs - house Cost, down payment, loan term (years) and annual interest rate, and calculates the mortgage payments. What's the best way to refactor this to a React component. I'm new to the concept of state and props and not sure how to refactor it to make the most efficient component. Or should it be broken down into a couple that first take inputs and then calculate them separately?

   function calculatePayment() {

     var houseCost = parseFloat(document.getElementById("houseCost").value);
    var downPayment = parseFloat(document.getElementById("downPayment").value);

    var termOfLoan = parseFloat(document.getElementById("termOfLoan").value);

    var annualInterestRate = parseFloat(document.getElementById("annualInterestRate").value);
    var principal = houseCost - downPayment;
    var percentageRate = annualInterestRate / 1200;
    var lengthOfLoan = 12 * termOfLoan;
    var monthlyPayment = (principal * percentageRate) / (1 - (Math.pow((1 + percentageRate) , lengthOfLoan * -1)));
    monthlyPayment = monthlyPayment.toFixed(2);
    document.getElementById("payment").value = monthlyPayment;

};

Answer 1

You could turn this into a pure function that can be used as a React component with props and no state.

function PaymentAmount(props) {
  const { houseCost, downPayment, termOfLoan, annualInterestRate } = props;
  const payment = (/* do math */);
  return payment;
}

Then you'd render it somewhere (assuming you use jsx) as something like...

<div>
  Payment amount:
  <PaymentAmount
    houseCost={/* some value */}
    downPayment={/* some value */}
    termOfLoan={/* some value */}
    annualInterestRate={/* some value */}
  />
</div>

Or should it be broken down into a couple that first take inputs and then calculate them separately?

If you consider the inputs to be within the scope of responsibility of this component you might consider a stateful component.

class PaymentCalculator extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      houseCost: 0,
      downPayment: 0,
      termOfLoan: 0,
      annualInterestRate: 0
    };
    this.handleHouseCostChange.bind(this);
    this.handleDownPaymentChange.bind(this);
    this.handleTermOfLoanChange.bind(this);
    this.handleAnnualInterestRateChange.bind(this);
  }

  handleHouseCostChange(event) {
    this.setState({houseCost: event.currentTarget.value });
  }

  handleDownPaymentChange(event) {
    this.setState({ downPayment: event.currentTarget.value });
  }

  handleTermOfLoanChange(event) {
    this.setState({ houseCost: event.currentTarget.value });
  }

  handleAnnualInterestRateChange(event) {
    this.setState({ annualInterestRate: event.currentTarget.value });
  }

  render() {
    return (
      <div>
        <input onChange={this.handleHouseCostChange} />
        <input onChange={this.handleDownPaymentChange} />
        <input onChange={this.handleTermOfLoanChange} />
        <input onChange={this.handleAnnualInterestRateChange} />
        Payment amount:
        <PaymentAmount
          houseCost={this.state.houseCost}
          downPayment={this.state.downPayment}
          termOfLoan={this.state.termOfLoan}
          annualInterestRate={this.state.annualInterestRate}
        />
      </div>
    );
  }
}

If you have React up and running in this project, the Intro to React tutorial will probably get your up to speed enough to be able to reactor your function to use React.