Estou fazendo um aplicativo em React
que calcula juros compostos e gostaria de saber se alguém sabe como criar vários componentes de uma vez de forma dinâmica.
Exemplo: se eu colocar 12 meses eu terei que gerar 12 componentes do tipo Box
com o montante, taxa de aumento e diferença do valor do montante inicial.
Eu gostaria de chamar o componente Box
várias vezes criando os boxes
que na verdade seriam divs
com as informações.
index.js
:
useEffect(() => {
var diference = 0;
var variation = 0;
var montante = 0;
for (let counter = 1; counter <= period; counter++) {
montante = initialCash * (1 + (tax / 100)) ** counter;
diference = montante - initialCash;
variation = diference / initialCash * 100;
createBoxes(counter, period, montante, diference, variation);
montante += diference;
}
}, [initialCash, tax, period])
function createBoxes(c, p, m, d, v) {
box = (
<div className="card">
<p> Mês: {c}</p>
<p> Valor: {m}</p>
<p> Diferença:{d}</p>
<p> Variação:{v}</p>
</div>
);
Box(box);
}
Box.js
:
import React from 'react';
export default function Box(props) {
//{ value } = props;
console.log(props.box);
return (
<div>{props.box}</div>
);
}