Estoy tratando de crear una matriz y luego llenarla usando una función. Básicamente estoy trabajando en una aplicación de calculadora de jubilación y tengo un par de valores iniciales que incluyen edad, edad de jubilación, salario, aumento de salario, contribución al ahorro, ahorro y tasa de interés del ahorro que obtengo a través de un formulario. Luego, usando esos valores como punto de partida, quiero crear una tabla que muestre el salario, los ahorros, el aumento, etc. para cada año, desde la edad inicial del usuario hasta la edad de jubilación. Similar a este sitio webhttps://www.bankrate.com/retirement/retirement-plan-calculator/ .
Básicamente, muestra el saldo de ahorro anual hasta la jubilación. Mi idea era calcular estos valores y almacenarlos en una matriz y luego mapearlos en una tabla. Soy muy nuevo en React y en la programación web en general, así que, sinceramente, no tengo ni idea de lo que estoy haciendo. Cualquier ayuda o sugerencia es apreciada.
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></> ) }Creo que estás en el camino correcto. Para los datos de la fila de la tabla, querrá usar una matriz. Y tiene razón al usar un bucle para llenar la matriz.
Así es como lo resolvería.
Primero hacemos un bucle sobre la edad e insertamos los datos de fila en la matriz de filas.
Luego pasamos filas a un nuevo componente al que he llamado ResultsTable .
ResultsTable luego mapeará sobre las filas y representará otro Componente que he llamado ResultRow .
ResultRow luego representará los datos de la fila.
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;