React.js + Redux| Code a Compound Interest Calculator

compoundit

Today I’m going to show you how to make a basic compound interest calculator using React.js! As a day trader, I am constantly finding myself needing to calculate compound interest but most calculators available don’t show how many trades it would take to reach a certain goal at a given interest rate. This calculator is going to take a starting investment, an interest rate and finally a goal amount. It will then calculate and render the amount of trades it would take to reach that goal; Let’s get to it!

Getting Started

The first thing we’re going to want to do is create a new react application. To do this, we will enter the following command

npx create-react-app your-app-name --template redux

Now that we have our newly created React application, let’s modify app.js by removing the default code. Let’s also add an h1 tag to make sure our app’s working properly

import './App.css';
const App = () => {
return (
<div className="app">
<h1>hello world</h1>
</div>
);
}
export default App;

and now let’s test our app by running the following command in the console

npm start

you should now be seeing something like this, congrats!

The Calculator Component

Now we’re going to want to replace our h1 tag with a Calculator component like so

import './App.css';
import Calculator from './Calculator';
const App = () => {
return (
<div className="app">
<Calculator />
</div>
);
}
export default App;

However, we will still get an error. This is because we haven’t yet created our component. Let’s create a new file in src called Calculator.js. Let’s build out the component as well to make sure it’s configured properly

import React from 'react';
const Calculator = () => {
return (
<div className="calculator">
<h1>I am the calculator</h1>
</div>
)
}
export default Calculator

and just like that, we’ve got our Calculator component up and running!

The Calculator Form

We’re now going to modify Calculator.js to add a basic form for our calculator. This will house our inputs as well as our solution for our calculations.

import React from 'react';
const Calculator = () => {
return (
<div className="calculator">
<h1>Calculator</h1>
<label>
Initial Investment
</label><br/>
$ <input></input><br/><br/>
<label>
Interest Rate
</label><br/>
% <input></input><br/><br/>
<label>
Goal
</label><br/>
$ <input></input><br/><br/>
<button>
Calculate
</button>
<h1>
Trades Necessary:
</h1>
</div>
)
}
export default Calculator

we should now have our calculator looking something like this

Redux

We will be using Redux to help us access and manipulate our state. Start by running the following command in the terminal

npm install react-redux && redux

We will also need to modify the features/counterSlice.js file so we can configure our calculator state

import { createSlice } from '@reduxjs/toolkit';
export const calculatorSlice = createSlice({
name: 'calculator',
initialState: {
count: 0,
initial: 0,
rate: 10,
goal: 0,
calculated: 0
},
reducers: {
setcalculator: (state, action) => {
console.log(action)
state.calculator = action.payload;
},
},
});
export const { setcalculator } = calculatorSlice.actions;
export default calculatorSlice.reducer;

The Calculator Logic

We will change our Calculator component to a class component. This will make accessing state much easier in this instance though it is not necessary.

import { Component } from 'react';
class Calculator extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
initial: 0,
rate: 10,
goal: 0,
calculated: 0
};
this.handleInitialChange = this.handleInitialChange.bind(this)
this.handleRateChange = this.handleRateChange.bind(this)
this.handleGoalChange = this.handleGoalChange.bind(this)
this.calculate = this.calculate.bind(this);
};
handleInitialChange = (e) => {
let value = parseInt(e.target.value);
this.setState({ initial: value })
}
handleRateChange = (e) => {
let value = parseInt(e.target.value);
this.setState({ rate: value })
}
handleGoalChange = (e) => {
let value = parseInt(e.target.value);
this.setState({ goal: value })
}
calculate = () => {
let count = 0;
let initial = parseInt(this.state.initial);
let sum = initial;
let rate = parseInt(this.state.rate)/100;
let trueRate = (rate+1)
let goal = parseInt(this.state.goal);
while (sum < goal) {
count ++;
sum = sum*trueRate;
}
this.setState({
calculated: count
})
}
render() {
return(
<div className="calculator">
<h1>Calculator</h1>
<label>
Initial Investment
</label><br/>
$ <input onChange={ this.handleInitialChange } value={ this.state.initial }></input><br/><br/>
<label>
Interest Rate
</label><br/>
% <input onChange={ this.handleRateChange } value={ this.state.rate }></input><br/><br/>
<label>
Goal
</label><br/>
$ <input onChange={ this.handleGoalChange } value={ this.state.goal }></input><br/><br/>
<button onClick={ this.calculate }>
Calculate
</button>
<h1>
Trades Necessary: { this.state.calculated === 0 ? "" : this.state.calculated }
</h1>
</div>
)
}
}
export default Calculator;

Now it’s time to test if our calculator is working. I know that with a starting amount of $1,000 at an interest rate of 100% it will take 10 trades to reach a goal of $1,000,000. Let’s input this information and see what we get…

And just like that, we’ve built our very own compound interest calculator!