React Project Tutorial – Build Mortgage Calculator App

Learn React by creating a financial application what will calculate the mortgage using React useState hook.

About this project

In todays project you will learn how to create a mortgage calculator app using React.js and useState

first you need to create a new react app using npx create-react-app . if you alrwardy have a designated folder, if not then npx create-react-app react-mortgage-calculator in order to create the project folder.

The cd create-react-app and now you can start your project using npm start.

1. Create React App using npx in the Terminal
2. Start React App using npm start
3. Visual Studio Code Extension for React Snippets
4. Use Bootstrap in React App
5. Use React icons
6. Create React Components
7. React Form Component
8. Create the Form Submit Button
9. Prevent the form from submitting
10. React Form input group Component
11. Use React pros for the Form input group component
12. Use React onKeyUp event listener to calculate the loan amount
13. Use React onInput event listener to calculate the loan amount
14. Make a react input read only
15. React useState hook to calculate the Loan Amount
16. Calculate Monthly payment
17. Convert to percentage function
18. Convert years to months function

React project dependencies and useful links

Add and use Bootstrap to react project

For some basic stayling I will use bootstrap, away-sly you can use anything you want. In order to use bootstrap in our react project you will need to go to:

bootstrap.com/

and grab on to the CDN, but because bootstrap now updated to its Bootstrap v5.2, I will still use Bootstrap v4.6 on this project.

Now lest get the link <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

and copy and paste it in the public folder in you index.html file head.

Source Code:

App.js

import "./App.css";
import { FcHome } from "react-icons/fc";
import Form from "./components/Form";

function App() {
  return (
    <div
      className="App container"
      style={{ maxWidth: 500, margin: "1rem auto" }}
    >
      <h1 className="display-1 my-5">
        <FcHome /> Mortgage Calculator{" "}
      </h1>
      <Form />
    </div>
  );
}

export default App;

Components:

Go to your source folder “src” and create a new folder called “components“. This is where all your components will be held, like the “Form.js” component and the “FormInputGroup.js” component.

Form.js Component

Now that you have your “components” folder, create the “Form.js” component by using “rfce” abbreviation, this will give you a function white the component name and export it as default at the bottom.

import React, { useState } from "react";
import { FaDollarSign } from "react-icons/fa";
import FormInputGroup from "./FormInputGroup";

function Form() {
 
  const [homeValue, setHomeValue] = useState("");
  const [downPayment, setDownPayment] = useState("");
  const [loanAmount, setLoanAmount] = useState("");
  const [interestRate, setInterestRate] = useState("");
  const [loanDuration, setLoanDuration] = useState("");
  const [monthlyPayment, setMonthlyPayment] = useState(0);

  function calculateLoanAmount() {
    setLoanAmount(homeValue - downPayment);
    return loanAmount;
  }

  function calculateMonthlyPayment() {
    // Percentage conversion
    function percentageToDecimal(percent) {
      return percent / 12 / 100;
    }

    // years to month conversion
    function yearsToMonths(year) {
      return year * 12;
    }

    setMonthlyPayment(
      (percentageToDecimal(interestRate) * loanAmount) /
        (1 -
          Math.pow(
            1 + percentageToDecimal(interestRate),
            -yearsToMonths(loanDuration)
          ))
    );

    return monthlyPayment;
  }

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <FormInputGroup
        text="Home Value "
        icon={<FaDollarSign />}
        placeholder={"Enter the value of the home"}
        value={homeValue}
        onInput={(e) => setHomeValue(e.target.value)}
        onkeyup={calculateLoanAmount}
      />
      <FormInputGroup
        text="Down payment"
        icon={<FaDollarSign />}
        placeholder={"Enter your funds"}
        value={downPayment}
        onInput={(e) => setDownPayment(e.target.value)}
        onkeyup={calculateLoanAmount}
      />
      <FormInputGroup
        text="Loan amount"
        icon={<FaDollarSign />}
        placeholder={"Enter your funds"}
        readOnly={true}
        value={loanAmount}
      />
      <FormInputGroup
        text="Interest Rate %"
        placeholder={"Enter your interest rate"}
        value={interestRate}
        onInput={(e) => setInterestRate(e.target.value)}
      />
      <FormInputGroup
        text="Loan Duration (years)"
        placeholder={"Enter the duration of your loan in years"}
        value={loanDuration}
        onInput={(e) => setLoanDuration(e.target.value)}
      />
      <h4 className="alert alert-info fw-bold">
        Monthly payment: <FaDollarSign />
        {parseFloat(monthlyPayment.toFixed(2))}
      </h4>

      <button
        type="submit"
        onClick={calculateMonthlyPayment}
        className="btn btn-primary btn-lg w-100 center "
      >
        Calculate
      </button>
    </form>
  );
}

export default Form;

Form Input Group.js Component

import React from "react";

function FormInputGroup({
  text,
  icon,
  placeholder,
  value,
  onInput,
  onkeyup,
  readOnly = false,
}) {
  return (
    <div className="input-group mb-3 ">
      <span className="input-group-text ">
        {text} {icon}
      </span>
      <input
        type="number"
        value={value}
        className="form-control"
        placeholder={placeholder}
        onInput={onInput}
        onKeyUp={onkeyup}
        readOnly={readOnly}
      />
    </div>
  );
}

export default FormInputGroup;

Video Tutorial

Check out the complete tutorial on my YouTube channel for a more indpt understanding of this React Project.