Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Obtenção do valor via {props.value}

O instrutor diz: "O value do select vamos receber via props.valor, e em seguida edita a linha de código de "ListaSuspensa" de maneira que ela fica assim:

<select onChange={evento => props.aoAlterado(evento.target.value)} required={props.required} value={props.value}/>

Porém, no "Formulario", não definimos atributo com nome "value" para o componente ListaSuspensa usado; além disso, não existe um atributo chamado "value" para a tag HTML <select> (apenas para a tag <option>, mas o componente em questão é um "select").

Portanto, as minhas perguntas em relação à linha de código citada anteriormente são:

  1. De onde vem o atributo value do componente <ListaSuspensa>? ele é nativo do HTML ou o instrutor o criou em algum momento?
  2. Onde é fornecido (inputado) o valor do props.value da linha de código citada?
  3. Onde é usado o props.valor que o instrutor menciona?

PS: Eu vi que se inspecionarmos o elemento <select> no DevTools e usarmos $0.value, ou o equivalente document.querySelector('select').value, o valor da opção selecionada, ou seja, o nome de um time, é exibido. Porém, isso para mim ainda é uma grande dúvida, pois eu imaginava que o value seria de <option> e não de <select>.

1 resposta
solução!

Olá Gabriel, tudo bem?

Vou tentar responder suas perguntas da melhor forma possível:

  1. O atributo value é nativo do HTML e é usado para definir o valor padrão de um select ou input.

  2. O valor de props.valor é passado para o componente ListaSuspensa através de uma propriedade (props). Fazemos isso porque quem vai controlar o estado do input é o componente que usa a ListaSuspensa e não a lista suspensa em si.

  3. O props.valor é o valor selecionado no select. É o mesmo conceito utilizado no componente CampoTexto.

Espero ter ajudado e bons estudos!