# How to Create a SIP Calculator with React.js useEffect

Here's a basic SIP (Systematic Investment Plan) calculator built with React.js and the `useEffect`

hook. This calculator lets users enter their monthly investment amount, expected rate of return, and how long they plan to invest, to find out the final amount they will receive from their SIP investment.

```
import React, { useState, useEffect } from 'react';
const SIPCalculator = () => {
const [monthlyInvestment, setMonthlyInvestment] = useState(0);
const [expectedRateOfReturn, setExpectedRateOfReturn] = useState(0);
const [investmentDuration, setInvestmentDuration] = useState(0);
const [maturityAmount, setMaturityAmount] = useState(0);
useEffect(() => {
const calculateMaturityAmount = () => {
// Convert expected rate of return to decimal
const rate = expectedRateOfReturn / 100;
// Calculate number of months
const months = investmentDuration * 12;
// Calculate maturity amount using SIP formula
const maturity = monthlyInvestment * ((Math.pow(1 + rate / 12, months) - 1) / (rate / 12)) * (1 + rate / 12);
setMaturityAmount(maturity.toFixed(2));
};
calculateMaturityAmount();
}, [monthlyInvestment, expectedRateOfReturn, investmentDuration]);
return (
<div>
<h1>SIP Calculator</h1>
<label>
Monthly Investment Amount (₹):
<input
type="number"
value={monthlyInvestment}
onChange={(e) => setMonthlyInvestment(parseFloat(e.target.value))}
/>
</label>
<br />
<label>
Expected Rate of Return (% per annum):
<input
type="number"
value={expectedRateOfReturn}
onChange={(e) => setExpectedRateOfReturn(parseFloat(e.target.value))}
/>
</label>
<br />
<label>
Investment Duration (years):
<input
type="number"
value={investmentDuration}
onChange={(e) => setInvestmentDuration(parseInt(e.target.value))}
/>
</label>
<br />
<label>
Maturity Amount (₹):
<input type="text" value={maturityAmount} readOnly />
</label>
</div>
);
};
export default SIPCalculator;
```

In this code:

We use the `useState`

hook to create state variables for `monthlyInvestment`

, `expectedRateOfReturn`

, `investmentDuration`

, and `maturityAmount`

.

The

`useEffect`

hook recalculates the`maturityAmount`

whenever the values of`monthlyInvestment`

,`expectedRateOfReturn`

, or`investmentDuration`

change.The

`calculateMaturityAmount`

function uses the SIP formula to find the maturity amount and updates the`maturityAmount`

state.The JSX code shows input fields for entering the monthly investment amount, expected rate of return, and investment duration. It also displays the calculated maturity amount in a read-only input field.

This calculator offers a straightforward interface for users to calculate the expected maturity amount of their SIP investment based on their inputs.