Estou fazendo um cálculo de Juros Compostos.
Recebo os dados do formulário valores.js
, chamado pela função enviarValores()
com o onSubmit={handleSubmit(enviarValores)}
e quero enviar as respostas results
(um array) para o arquivo de Resultados.js
porém, para cada dado inserido, no console.log, ele já mostra os resultados. Mas não mostra na tela.
Somente quando eu insiro um novo dado.
Dúvida, como fazer para ele chamar o Resultados.js somente quando eu clicar no botão de enviar?
E o que há de errado no mostrar os dados na tela?
Arquivos
Valores.js
import useForm from "../../controllers/useForm";
import { Container } from "./styles";
import Resultados from "../resultados/Resultados";
export default () => {
const [{ values, loading }, handleChange, handleSubmit] = useForm();
const [results, setResults] = useState([]);
const enviarValores = () => {
const capitalInicial = parseFloat(values.montanteInicial) || null;
const rate = parseFloat(values.taxaJurosMensal) || null;
const period = parseInt(values.periodoMeses) || null;
let totalAmount = 0;
// let valorMensalPorcentagem = 0;
let valorMensal = 0;
let taxaJurosPorcentagem = rate / 100;
for (let i = 1 ; i <= period ; i++) {
totalAmount = capitalInicial * ((1 + taxaJurosPorcentagem)**i);
valorMensal = totalAmount - capitalInicial;
results.push({ month: i, totalAmount: totalAmount.toFixed(2), valorMensal: valorMensal.toFixed(2)});
};
};
useEffect(() => {
return () => {
setResults(results);
}
},);
return (
<div className="row">
<Container>
<div className="row titulo">
<h1>Juros Composto</h1>
</div>
<form className="col s12" onSubmit={handleSubmit(enviarValores)}>
<div className="row">
<div className="input-field col s6">
<input
onChange={handleChange}
name="montanteInicial"
id="montanteInicial"
type="number"
className="validate"
required
step="0.01"
min="1000"
max="99999"
/>
<label htmlFor="montanteInicial">Montante Inicial</label>
</div>
</div>
<div className="row">
<div className="input-field col s6">
<input
onChange={handleChange}
name= "taxaJurosMensal"
id="taxaJurosMensal"
type="number"
className="validate"
required
step="0.01"
min="-99999.99"
max="999999.99"
/>
<label htmlFor="taxaJurosMensal">Taxa de Juros Mensal</label>
</div>
</div>
<div className="row">
<div className="input-field col s6">
<input
onChange={handleChange}
type="number"
id="periodoMeses"
name="periodoMeses"
className="validate"
required
pattern="[0-9]+$"
min="1"
max="90"
/>
<label
htmlFor="periodoMeses"
data-error="Preencha o campo com a quantidade de meses"
className="active">Período (meses)
</label>
</div>
</div>
<button className="btn waves-effect waves-light" type="submit" name="action">{loading ? "Enviando..." : "Enviar"}</button>
</form>
</Container>
<Resultados results={results} />
</div>
);
}
Resultados.js
function Resultados({results}) {
console.log(results);
return(
<div>
<ul>
{ results.map((row, i) =>
<li key={i}>
<strong scope='row'>{row.month}</strong>
<p>R${row.totalAmount}</p>
</li>
)}
</ul>
</div>
)
}
export default Resultados;
O código está disponível em https://stackblitz.com/edit/juros-compostos