[Dúvida] Hook - campo Select Time | React: desenvolvendo com JavaScript

2
respostas

Referente ao curso React: desenvolvendo com JavaScript

por Daniel do Prado Rocha

| 133k xp | 22 posts

Olá, acredito que compreendi a necessidade do uso de Hooks para passar valores. Ocorre que isso ocorre somente quando onChange (aoAlterado).

Observando que o formulario já carrega com o campo Time com um valor (index 0 - no nosso caso Programação) e, no caso do colaborador cadastrado pertencer a este time, o valor NÃO se altera, portanto não é passado adiante.

Como solucinar neste caso? Eu imagino que: useState('Programação') como valor inicial (ou index 0)

const [nome, setNome] = useState(''); const [cargo, setCargo] = useState(''); const [imagem, setImagem] = useState(''); const [time, setTime] = useState('');

const aoSalvar = (evento) => {
    evento.preventDefault();
    props.aoColaboradorCadastrado({
        nome,
        cargo,
        imagem,
        time
    })
};

2 respostas

por Renan Lima

| 2918.3k xp | 6070 posts

Instrutor Scuba Team

18/04/2023

Olá Daniel,

Entendi sua dúvida sobre o uso de Hooks no campo Select Time. Realmente, o valor só é passado adiante quando ocorre o evento onChange.

Para solucionar o problema que você mencionou, você pode definir o valor inicial do campo Time utilizando o useState, como você sugeriu. Ficaria assim:

const [time, setTime] = useState('Programação');

Assim, quando o formulário carregar, o campo Time já estará preenchido com o valor "Programação" e, caso o colaborador pertença a esse time, o valor não será alterado.

Espero ter ajudado e bons estudos!

por Alexandre Sousa Silva

| 66.1k xp | 30 posts

Application Developer

22/04/2023

Olá, complementando o que o Renan trouxe, eu optei por utilizar como valor inicial do useState() o primeiro item do array de times, neste caso:

const [time, setTime] = useState(times[0]);

E por que? Hoje a lista de times é estática e para o projeto, não irá variar. Mas se amanhã se for preciso alterar a ordem ou mesmo, adicionar um novo elemento no início da lista, ter definido o que useState deva ser "Programação" poderia gerar um problema, por não refletir o conteúdo da nova lista. Teríamos que alterar a informação em dois lugares diferentes.

Ao utilizar uma abordagem mais dinâmica, toda vez que a lista for atualizada, o select também será! Como mencionei, não deve fazer diferença alguma para este projeto, mas te convido a pensar nessa abordagem ;)