Resumo do Transcrito

E aí pessoal, estamos de volta aqui, acabamos de terminar de criar teste para o componente radio list aqui, eu estou aqui no navegador com a aba do react da tools aberta e aqui embaixo eu posso mover o console do mouse para poder selecionar qual componente de react está sendo usado nessa visão. Então a gente fez os testes para o radio list aqui, agora é hora de a gente fazer os testes para esse select, certo? Esse select aqui que você tem várias opções, você pode selecionar uma opção somente. Então vamos lá, vamos dar uma olhada no código, eu abri o editor de texto do projeto aqui, se você for src, barra components, barra, como barra select, tem aqui o arquivo do select, você não acha que o select aqui tem esses comentários aqui, a maneira de que esse componente é usado e recebe propriedade name, que é o nome do próprio campo, e tem value, que é o valor que está selecionado, tem um ontim de que é uma função para lidar com a mudança das cores, das opções, e tem as próprias opções, a lista de opções que vai aparecer naquele drop down do select. Então você note que na definição do próprio componente, a gente usa um componente funcional sem ditado, ele pega, cria um componente de select aqui, você passa o nome do campo, tem um change, tem o valor selecionado, e tem as opções aqui dentro do select, que tem que ter o option, por causa do html, e assim que funciona, quando você tem o select, tem que ter várias components options dentro, como crianças do select, para representar cada opção desse drop down, não é? Então a gente fez o drop down baseado na própria chamada options aqui, as opções que você vai ver aqui do arquivo, quando a gente estava lá no do formulário, a gente usou esse arquivo de constants aqui, constants, barra index, .js, que tem as opções de cada país, uma lista de objetos com id, label e value, da mesma maneira que a gente fez anteriormente, com gênero, fruto e... Certo? Agora note aqui que o select do reactor tem esse próprio value, né? Em vez de a gente dar uma propriedade selected para a própria option, para indicar que está selecionada, a gente só precisa usar, passar essa própria value para o próprio select, então fica muito mais conveniente, em vez de ter que lidar com, para saber qual, qual das options você quer adicionar o selector aqui. Então não precisa disso no reactor, é só usar o value do próprio componente select. Certo? Então a gente entendeu aqui, deu um revisado no componente select, a gente vai começar os nossos testes, certo? Da próxima aula. Então até mais, tchau!