Nesta etapa, vamos implementar a funcionalidade de selecionar uma pessoa específica na tabela e carregar seus dados no formulário para edição.
Primeiramente, criamos a função selecionarPessoa, que recebe o índice do registro clicado:
// Selecionar pessoa específica
const selecionarPessoa = (indice) => {
setPessoa(pessoas[indice]);
setBotaoCadastrar(false);
}
Explicando:
Em seguida, passamos essa função para o componente Tabela:
<Tabela registros={pessoas} funcao={selecionarPessoa} />
Dentro da tabela, vinculamos a função ao botão Selecionar:
<td>
<button onClick={() => funcao(indice)} className="btn btn-primary">
Selecionar
</button>
</td>
Dessa forma, ao clicar no botão, os dados da pessoa são carregados automaticamente no formulário, permitindo a edição ou remoção.
No vídeo abaixo, mostro como implementar essa funcionalidade na prática, conectando a tabela ao formulário e deixando a aplicação mais interativa.