Projeto 03 – O Gestor de Finanças Pessoal 💰
Neste projeto, você vai aplicar o useState para criar um mini sistema de controle financeiro que permite adicionar ganhos e gastos.
🎯 Objetivo
Gerenciar múltiplos estados, lidar com arrays no React e criar uma interface reativa que responde a inputs do usuário.
🛠️ Requisitos
- Uso de useState para o saldo total.
- Uso de useState para a lista de transações (array).
- Renderização de listas com
.map(). - Estilização condicional (ex: valores negativos em vermelho).
📝 Passo a Passo
1. Estrutura do Estado
No seu App.jsx, crie dois estados principais:
- transacoes: Um array de objetos { id, texto, valor }.
- inputTexto e inputValor: Para capturar os dados do formulário.
2. Formulário de Entrada
Crie um formulário com dois campos e um botão "Adicionar Transação".
- Dica: Use o evento onChange para atualizar os estados dos inputs.
3. Lógica de Adição
Crie uma função adicionarTransacao que:
- Evita o comportamento padrão do form (e.preventDefault()).
- Cria um novo objeto de transação.
- Usa o spread operator para adicionar ao array: setTransacoes([...transacoes, novaTransacao]).
4. Exibição e Saldo
- Crie um componente
Resumoque calcula a soma de todas as transações e exibe o saldo atual. - Liste as transações abaixo do formulário.
✅ Critérios de Entrega
- O saldo total deve atualizar automaticamente ao adicionar uma nova transação.
- A lista deve exibir o nome e o valor de cada item.
- O código não deve realizar mutações diretas no array (usar funções que retornam novos arrays).
Bônus
Adicione um botão "Remover" em cada transação que filtre o array para deletar o item selecionado!