Creating an array in React and populating with values

Question

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></>
    )
}

Answer 1

I think you are on the right track. For Table Row data, you will want to use an array. And you are right to use a loop to populate the array.

Here is how I would solve it.

First we loop over age, and push row data into the rows array.

Then we pass rows to a new component which I have named ResultsTable.

ResultsTable will then map over the rows and render another Component which I have named ResultRow.

ResultRow will then render the row data.

import React from 'react';

export const Results = ({ results }) => {
  // Init an array for holding rows data
  const rows = [];

  // Initial variables
  let age = results.age;
  let salary = results.salary;
  let retSavings = results.savings;

  // Loop age until we reach retirement age, pushing data into the rows array
  while (age < results.retAge) {
    // Calculate the next salary and retSavings
    salary += salary * (results.increase / 100);
    retSavings += salary * (results.cont / 100) + retSavings * (results.interest / 100);

    // Push each row into the array
    rows.push({
      age: age,
      salary: salary,
      retSavings: retSavings,
    });

    ++age;
  }

  return (
    <div className="results">
      <h3>
        At retirement age of {results.retAge}, {results.name} will have a total savings of{' '}
        {formatCurrency(retSavings)}
      </h3>
      <ResultsTable rows={rows} />
    </div>
  );
};

const ResultsTable = ({ rows }) => {
  return (
    <table>
      <thead>
        <tr>
          <td>Age</td>
          <td>Salary</td>
          <td>Savings</td>
        </tr>
      </thead>
      <tbody>
        {rows.map((row) => (
          <ResultRow key={row.age} data={row} />
        ))}
      </tbody>
    </table>
  );
};

const ResultRow = ({ data }) => {
  return (
    <tr>
      <td>{data.age}</td>
      <td>{formatCurrency(data.salary)}</td>
      <td>{formatCurrency(data.retSavings)}</td>
    </tr>
  );
};

const formatCurrency = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
}).format;