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.