Wsrtjtyk

The function handleCostChange is supposed to calculate the mortgage payment based on the inputs. It currently returns NAN- I first wrote it in JavaScript and it worked well. I'm trying to figure out what went wrong when I tried to refactor this function from Javascript and add it to my React component.

import React, { Component } from 'react';



import Counter from './components/Counter';

import './App.css';



class App extends Component {

  state = {

    cost: 0,

    houseCost: 0,

    downPayment: 0,

    termOfLoan: 0,

    annualInterestRate: 0

  };

  handleChange = (e) => {

    this.setState({

      houseCost: e.target.houseCost,

      downPayment: e.target.downPayment,

      termOfLoan: e.target.termOfLoan,

      annualInterestRate: e.target.annualInterestRate 

    });

  };

  handleCostChange = () => {

    const principal = this.state.houseCost - this.state.downPayment

    const percentageRate = this.state.annualInterestRate / 1200

    const lengthOfLoan = 12 * this.state.termOfLoan

    this.setState(

      prevState => ({

        cost: (prevState.cost = (principal * percentageRate) / (1 - (Math.pow((1 + percentageRate) , lengthOfLoan * -1)))).toString()

      });

    );

  };

  render() {

    return (

      <div className="App">

        <Counter

          cost={this.state.cost}

          houseCost={this.state.houseCost}

          downPayment={this.state.downPayment}

          termOfLoan={this.state.termOfLoan}

          annualInterestRate={this.state.annualInterestRate}

          changeCost={this.handleCostChange}

          handleChange={this.handleChange}

        />

      </div>

    );

  }

}



export default App;

Counter.js file

import React from 'react';





const Counter = (props) => {



        return (

            <div className="counter">

                <input 

                   type="number" 

                   placeholder="House Cost" 

                   onChange={(e) => props.handleChange(e)}>

                </input>

                <input 

                   type="number" 

                   placeholder="Down Payment" 

                   onChange={(e) => props.handleChange(e)}>

                </input>

                <input 

                   type="number" 

                   placeholder="Mortgage Period (years)" 

                   onChange={(e) => props.handleChange(e)}>

                </input>

                <input 

                   type="number" 

                   placeholder="Interest Rate" 

                   onChange={(e) => props.handleChange(e)}>

                </input>

                <button 

                   className="counter-action" 

                   onClick={props.changeCost}

                >Calculate

                </button>

                <span className="counter-score">{ props.cost }</span>

            </div>

            );

    }





export default Counter;

Try this

  handleCostChange = () => {

       const { houseCost, downPayment, annualInterestRate, termOfLoan } = this.state;

       const principal = houseCost - downPayment

       const percentageRate = annualInterestRate / 1200

       const lengthOfLoan = 12 * termOfLoan;

       const cost = (principal * percentageRate) / (1 - (Math.pow((1 + percentageRate) , lengthOfLoan * -1))).toString();

       this.setState({

           cost

       })

   }

Also you need further changes. Create individual event handlers and set the value using event.target.value

   handleCostChange = (e) => {

        this.setState({

            houseCost: e.target.value,

        });

   }



   handleDownPayment = (e) => {

        this.setState({

            downPayment: e.target.value,

        });

   }



   handleannualInterestRate = (e) => {

        this.setState({

           annualInterestRate : e.target.value,

        });

   }



   handleTermOfLoan = (e) => {

        this.setState({

            termOfLoan: e.target.value,

        });

   }

And pass down all event handlers

       <Counter

      cost={this.state.cost}

      houseCost={this.state.houseCost}

      downPayment={this.state.downPayment}

      termOfLoan={this.state.termOfLoan}

      annualInterestRate={this.state.annualInterestRate}

      handleCostChange={this.handleCostChange}

     handleTermOfLoan ={this.handleTermOfLoan}

     handleannualInterestRate={this.handleannualInterestRate}

     handleDownPayment={this.handleDownPayment}

    />

Now in Counter.js pass values as value prop to input elements along with individual event handler functions

        <input type="number" placeholder="House Cost" onChange={(e) => props.handleCostChange(e)} value={props.houseCost}></input>

            <input type="number" placeholder="Down Payment" onChange={(e) => props.handleDownPayment(e)} value={props.downPayment}></input>

            <input type="number" placeholder="Mortgage Period (years)" onChange={(e) => props.handleTermOfLoan(e)} value={props.termOfLoan}></input>

            <input type="number" placeholder="Interest Rate" onChange={(e) => props.handleannualInterestRate(e)} value={annualInterestRate}></input>

Please excuse me for typo errors because I am answering on my mobile