Resumo da Transcrição

Então, eu esqueci de fechar o parênteses da função map. Só ir aqui, adicione, outro, salvar. Certo? Só isso. Tem parênteses aqui e tem os parênteses aqui, então tem que ser dois. Ok? Vamos testar. Tudo ok. Tudo seguindo. Está na hora do select. Vamos fazer o nosso próprio select. Nesse caso, vai ser de novo parecido com os outros. Vamos fazer nosso próprio select. Note maiúsculo aqui. Ou pode dizer drop down, outro termo, para o select. Vamos usar drop down. Ou drop down select, sei lá. Qual o nome que você quer usar? Vamos deixar select. Selecta a gente que quer usar como? Vamos fazer aqui. Você note o nome, precisar de um nome. Nesse caso, país. Aqui, no mesmo dia desse cara. O valor também. E o onChange também o mesmo. Copia e cola aqui. Note que as opções tem várias. Mas a gente quer fazer a mesma coisa que a gente fez antes. Vamos passar a um options. Então, país, options. Entendeu? Vai ser um objeto cujo level vai ser Brasil e valor BR. E assim por diante. E assim que a gente quer definir nosso componente com essas props. Name, value, onChange e options. Vamos lá. Vamos lá. Criar o arquivo. Cadê? SCIC, new file, novo arquivo, select.js. Vou te desafiar a fazer o boilerplate. E aí, deu certo? Import react. On react. Select props. Opa, deu um typo ali. Deixou. Certo? Import react. Defina a função. Exporta. Opa. Vamos lá. Vamos copiar o negócio do app. Esse select aqui. Esse cara aqui. Certo? Vamos copiar o select puro HTML. Faze puro, né? Ainda é JTSX. Colar aqui. Deixa eu quebrar esse key. Só vou ver melhor. Quando eu faço isso, eu gosto de deixar esse cara assim. Então, name vai ser dado por props. Deixa eu copiar por um referência key. Como vai ser, o componente vai ser usado. Opa. Opa. Eu esqueci de quebrar a linha para o onChange, né? Nem vi. Ok. Vamos lá. Name vai ser props.name. E o valor. Valor também. Props.value. Entendeu esse cara aqui? You onChange, mesma coisa. Esse cara aqui. Props.onChange. Certo? E as opções? As opções vão ser dadas nessa ratio of objects. Então, serão dadas como props a select. Então, a gente vai fazer o map de novo. Vamos pegar esses caras aqui e extrair para o map. Tá bom? Então, vamos aqui. Antes do return, vamos fazer o map. Vamos chamar de o quê? Sei lá. Opções, options. Option. Sei lá, nem sei. Option. Choices. Difícuta. Escolhei o nome. Pode ser o mesmo nome, mas eu não quero que você confunda o options do props com esse options. Por isso que eu estou pensando muito. Sei lá, vou botar choices. Se você escolhe qualquer nome que quiser. Então, vamos fazer o mapping dos props, font options. Option. Eu vou estar parênteses. Para, retorno explícito. Só uma opção, tá bom? Mesmo desse cara, como exemplo, esse aqui. Mas o valor vai ser o quê? Value vai ser option.value. You label. Option.Label aqui, entendeu? Vai ser assim. O label é esse cara. You value vai ser esse cara aqui. Aí, aqui, pega esses caras, remove, e bolt option, choices. Dessa maneira. Se lembra que a gente tem que dar o key? Então, aqui vai ser aqui o id, por exemplo. E como está muito longo, eu vou quebrar a linha. Dessa maneira aqui. Você gosta ou não? Pode fazer de maneira que você quiser. Certo? Não confundem se option com esse option? É mesmo nome, mais diferente. Esse aqui é um objeto, elemento dessa array, um dos elementos dessa array. Oh, esqueci de uma coisa, né? O map. Desculpe, a gente está dando map. Para cada elemento de options, vamos criar um novo array, e para cada elemento de options, vamos criar um novo elemento, esse cara aqui. Entendeu? Se bem que esse negócio está, fica meio feio, né? Vamos fazer assim. Melhor. Certo. Vamos testar esse cara. Já exportou ali, corretamente. Volta o app, pega lá em cima e porta. Select from, select. E agora a gente vai fazer o quê? O que aconteceu? Oh, não tem países. Por favor, vamos definir. Vou te dar como desafio, pause o vídeo e faça aí. Defina a país options, da mesma maneira desses outros aí. E deu certo? Vamos lá. País options. Objeto ID1. Lembra-se o quê? Primeiro é o Brasil, né? Be... Oh, desculpa. Brasil, e o valor é BR. Vamos copiar esse cara aqui três vezes, ou quanto você quiser. Pode botar os pais se você quiser. United States, US, Nihon, vamos botar o japonês aqui. Esse aqui significa Japão, Nihon, JP. Certo? Tudo legal? Defina os países options, vamos lá salvar. Será que deu certo? Será que não deu? Oh, oh. Das primeiras que é o select a gente tem. Oh, só tem Brasil, o quê é isso? País options. Certo. State of Pais, não sei o quê. Options. Vou botar aqui. País, esse. Ah, o ID. Olha o ID. Esquecemos. ID1, 2, 3. Agora sim. Não, esqueça do ID1, 2, 3. Você quer ser único, exclusivo. Nihon, Brasil, United States. Tudo funcionando direitinho. Que legal. Vamos voltar lá e remover o antigo. Você vê que o negócio ficou melhor agora. Os opções agora estão no objeto. País options fica melhor. Voltando aqui ao select. Só para... mostrar uma coisa aqui. Se lembra que a gente fez o refactor, refatoração, antes de... usando o destruturamento. Se lembra do radio list. Oh, desculpa do radio, esse cara que a gente fez aqui. Pode fazer o mesmo aqui no select. Mas agora eu quero te ensinar como fazer o destruturamento no próprio parâmetro da função. Você não sabe que eu estou usando props name, value, on change. Vamos lá. Em vez de fazer destruturamento novo, variável, vou aqui direto no props e vou escrever ali destruturamento. Estrai essas propriedades do props. Name, value, on change. Entendeu? Estamos usando outro. Ah, options, esse cara aqui. Options. Aí, não precisa mais fazer props.options. Nem esse, nem esse. E nem esse. Remove. Salva. E aí, testa. Certo? É o chamado destruturamento direto do parâmetro da função. Detalhe que normalmente se você tiver muitos... muitos parâmetros, muitas propriedades, normalmente goste de fazer numa variável como a gente fez no radio, aqui dessa maneira. Porque se tiver muita, a linha vai ficar muito longa então eu gosto de quebrar esses caras assim, novelinha, entendeu? Assim. Fica melhor. Se tiver muito, muito, muitos parâmetros. Certo? Então, voltando aqui, select. Entendeu? Certo.