title: Single responsibility principle React refactor
body: <p>Knowing about the single responsibility principle I need to separate my logic from rendering. This code takes the inputs and calculate the rate for how much house mortgage rate you can afford. I'm trying to wrap my head around how to refactor the following code in the best way and make my code easy to read and re-use. Any ideas? </p>
  
  <pre><code> import React, { Component } from 'react';
  
  
  class MonthlyPay extends Component {
    state = {
      cost: 0,
      houseCost: 0,
      downPayment: 0,
      termOfLoan: 0,
      annualInterestRate: 0
    }
     handleHouseCostChange = (e) =&gt; {
          this.setState({
              houseCost: e.target.value,
          });
     }
  
     handleDownPayment = (e) =&gt; {
          this.setState({
              downPayment: e.target.value,
          });
     }
  
     handleannualInterestRate = (e) =&gt; {
          this.setState({
             annualInterestRate : e.target.value,
          });
     }
  
     handleTermOfLoan = (e) =&gt; {
          this.setState({
              termOfLoan: e.target.value,
          });
     }
     handleCostChange = () =&gt; {
          const { houseCost, downPayment, termOfLoan, annualInterestRate } = this.state;
          const principal = houseCost - downPayment
          const lengthOfLoan = 12 * termOfLoan;
          const percentageRate = annualInterestRate / 1200
          console.log(lengthOfLoan);
          // Formula M = P[i(1+i)^n]/[(1+i)^n -1]
          const cost = (principal * percentageRate) / (1 - (Math.pow((1 + percentageRate) , lengthOfLoan * -1))).toString();
          this.setState({
              cost: cost.toFixed(2)
          })
      }
    render() {
      return (
          &lt;div className="counter"&gt;
            &lt;div&gt;
              &lt;span className="counter-score"&gt;House Cost&lt;/span&gt;
              &lt;input type="number" placeholder="House Cost" onChange={(e) =&gt; this.handleHouseCostChange(e)}&gt;&lt;/input&gt;
           &lt;/div&gt;  
           &lt;div&gt;
              &lt;span className="counter-score"&gt;Down Payment&lt;/span&gt;
              &lt;input type="number" placeholder="Down Payment" onChange={(e) =&gt; this.handleDownPayment(e)}&gt;&lt;/input&gt;
          &lt;/div&gt; 
          &lt;div&gt;
              &lt;span className="counter-score"&gt;Mortgage Period (years)&lt;/span&gt;
              &lt;input type="number" placeholder="Mortgage Period" onChange={(e) =&gt; this.handleTermOfLoan(e)}&gt;&lt;/input&gt;
          &lt;/div&gt;
           &lt;div&gt;
              &lt;span className="counter-score"&gt;Interest Rate&lt;/span&gt; 
              &lt;input type="number" placeholder="Interest Rate" onChange={(e) =&gt; this.handleannualInterestRate(e)}&gt;&lt;/input&gt;
          &lt;/div&gt; 
                  &lt;button className="counter-action" onClick={this.handleCostChange}&gt;Calculate&lt;/button&gt;
                  &lt;span className="counter-score"&gt;{ this.state.cost }&lt;/span&gt;
              &lt;/div&gt;
              );
    }
  }
  
  export default MonthlyPay;
  </code></pre>