1

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>
    );
}
2
  • 1
    é só criar um estado de listagem ou array e ao implementar essa lista automaticamente ele cria as caixas, qual a sua dificuldade?
    – novic
    Commented 26/08/2020 às 14:59
  • Quando rodo o código todos estão undefined quando chegam a Box
    – ajsalmeida
    Commented 26/08/2020 às 19:01

2 Respostas 2

1

Propondo um exemplo de criação de component da seguinte forma: vai digitar o valor dentro da caixa e ao clicar no botão Criar será criado várias caixas. Esse exemplo é o mais simples possível, mas, demonstra praticamente a sua duvida:

function Box({item}) {
  return <div className="box">{item.number}</div>
}

function App() {  
  const [count, setCount] = React.useState(0);
  const [items, setItems] = React.useState([]);
  const handleCreateBox = () => {
    const datas = [];
    for(let i = 0; i < count; i++) {
      datas[i] = {
        number: i + 1,
        description: `desc${i}` 
      }
    }
    setItems(datas);
  }
  return (
    <div>
      <div>
        <input 
             type="text" 
             value={count} 
             onChange={e => setCount(e.target.value)} 
        />
        <button 
          onClick={handleCreateBox}>Criar</button>
      </div>
      <div>
        {items.map((item, index) => <Box item={item} />)}
      </div>
    </div>
  )
}
ReactDOM.render(<App/>, document.getElementById('root'));
.box {
  height: 50px;
  width: 50px;
  border: 1px solid #333;
  margin: 6px;
  float: left;  
  justify-content: center;
  align-items: center;
  display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

-2

Eu penso que assim seria uma boa forma de resolver isso:


function Installments({ initialCash, tax, period }) {
  return Array.from({ length: period }, (v, k) => k).map((item) => {
    const montant = initialCash * (1 + tax / 100) ** item + 1;
    const diference = montant - initialCash;
    const variation = (diference / initialCash) * 100;

    return (
      <div className="card">
        <p> Mês: {item}</p>
        <p> Valor:{montant} </p>
        <p> Diferença:{diference}</p>
        <p> Variação:{variation}</p>
      </div>
    );
  });
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Installments initialCash={1000} tax={1.5} period={12} />
    </div>
  );
}

Os componentes ficam be separados e a lógica para calcular as parcelas ficam no componente de parcelas(Installments)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .