I’m trying to create an array and then populate it using a function. I’m basically working on a retirement calculator application and I have a couple of initial values including age, retirement age, salary, salary increase, contribution to savings, savings, and interest rate on savings which I’m getting through a form. Next using those values as a starting point I want to create a table which will show the salary, savings, increase, etc for each year starting from the user’s starting age up until their retirement age. Similar to on this website https://www.bankrate.com/retirement/retirement-plan-calculator/.
So basically showing the yearly savings balance until retirement. My idea was to calculate these values and store it in an array and then map it onto a table. I’m very new to React and web programming in general so I honestly have no idea what I’m doing. Any help or suggestions are appreciated.
const Results = ({results}) => {
var age = results.age;
var retAge = results.retAge;
//var yearsToRet = retAge - age;
var salary = results.salary;
var increase = results.increase;
var cont = results.cont;
var savings = results.savings;
var interest = results.interest;
var retSavings = savings;
//To format the results as dollar value
const formatter = new Intl.NumberFormat("en-US", {style: "currency", currency: "USD", minimumFractionDigits: 2})
//Calculating savings during retirement
for(var i = age; i < retAge; ++i)
{
//new salary with increase
salary += salary * (increase/100);
retSavings += salary*(cont/100) + retSavings*(interest/100);
}
const savingsList = [
{
age: results.age,
retAge: results.retAge,
salary: results.salary,
increase: results.increase,
cont: results.cont,
savings: results.savings,
interest: results.interest,
retSavings: savings,
}
];
console.log(savingsList);
return(
<><div className='results'>
<h3> At retirement age of {retAge}, {results.name} will have a total savings of {formatter.format(retSavings)}</h3>
</div></>
)
}