Nesta etapa, vamos criar um objeto para representar uma pessoa e controlar os dados do formulário de forma dinâmica utilizando o useState.
Primeiramente, criamos um estado chamado pessoa, que será um objeto com os atributos id, nome e cidade:
const [pessoa, setPessoa] = useState({id:null, nome:"", cidade:""});
Em seguida, compartilhamos esse objeto e a função de atualização com o componente Formulario:
<Formulario
botao={botaoCadastrar}
atualizarPessoa={atualizarPessoa}
pessoa={pessoa}
/>
Agora, vamos criar a função responsável por atualizar os dados do objeto conforme o usuário digita nos campos:
// Atualizar objeto pessoa
const atualizarPessoa = (e) => {
const {name, value} = e.target;
setPessoa({...pessoa, [name]: value});
}
Essa função utiliza o atributo name dos inputs para identificar qual campo deve ser atualizado, tornando o código mais reutilizável e elegante.
Por fim, vinculamos os inputs ao estado pessoa:
<input type="number" defaultValue={pessoa.id}
onChange={atualizarPessoa} name="id"
placeholder="Código" className="form-control" readOnly />
<input type="text" defaultValue={pessoa.nome}
onChange={atualizarPessoa} name="nome"
placeholder="Nome" className="form-control" />
<input type="text" defaultValue={pessoa.cidade}
onChange={atualizarPessoa} name="cidade"
placeholder="Cidade" className="form-control" />
Dessa forma, sempre que o usuário digitar em um campo, o objeto pessoa será atualizado automaticamente.
No vídeo abaixo, mostro como controlar os dados do formulário utilizando estado, preparando a aplicação para realizar cadastro, edição e remoção de registros.