Resumo do Transcript

E a gente monta o componente assim para criar o wrapper, mas é importante entender que esse cara, o checkbox list recebe props, então a gente tem que fazer uns, as nossas props falsos aqui, passar para o checkbox list. Então para isso a gente vai ter que passar a cada props, que é, se lembra aqui, o checkbox list, se eu for para o formulário e ponto js, na função render, o checkbox list leva vários props, name, label, options, checked options, um change. A gente precisa fazer, definir esses props e passar para o componente checkbox aqui, que está sendo montado com o shell. Uma opção é fazer um bom, um assim, name, no seu key, label. E assim por diante, eu não vou fazer isso, eu gosto de fazer de outra maneira, eu vou pegar esses caras, deixe assim, eu vou fazer primeiro uma variável chamada props, define como um object, aí vamos definir os props aqui, props falsos. Pode ser a mesma coisa ali, a implementação, você pescolhe. Então vamos lá, eu gosto, não sei o que. Eu vou tirar esse que gosta, botar só frutos. Options, a gente não sabe, não tem options, deixa eu deixar só a lista vazia, checked options. Desse, ponto state, ponto frutos, esse aqui, também a gente vai fazer já já, deixa eu só escrever a outra aqui, um change. Vamos lidar uma por um. Certo, então vamos começar aqui com name, o name já está certo, vai ser qualquer nome que você quiser, label. Agora esse options, o que é esse options? Eu não vou fazer uns options falsos aqui. Esse options vem de fruta options, fruta options, se você se lembra, está naquele de constantes, src, bar constant, bar index. Então esse fruta options na verdade é só uma lista com vários objetos que tem propriedades id, label e value. Se você quiser, pode fazer, define aqui os props, vamos criar uma variável aqui. Options. Criar essa variável, chamar options, e eu vou, vamos lá, opa, tem que ser uma lista, não é um objeto, uma lista de objetos. Vamos criar um list de objetos. Primeiro objeto aqui, o id, pode, qualquer coisa, eu vou dar 3, label, sei lá, ah, normal, value, malão. Aí eu vou duplicar essa linha, umas, uma, duas, e vamos dar o id, 4, 5, para ficar diferente, e vamos mudar o label aqui, vamos botar outra fruta, você escolhe qualquer fruta que você quiser, e eu vou estar falando de novo. Então aqui vamos ver, sei lá, botar bem alguma coisa. Então a gente terminou de definir essa variável options para as listas de opções falsas para passar para o oponente. Então, com esse cara já definido, vou dar um fold aqui para poder não atrapalhar, e no option a gente vai passar essa variável. Options. No SC, se você tiver um objeto cuja aqui, a chave é, tem o mesmo nome que o value aqui, que é nesse caso, a variável, o nome da variável, você pode fazer, remover esse cara que está no mesmo, sabe? É mais curto. Agora vamos lidar com esse checkbox, eu quero esse cara, vamos lá, voltar para o checkbox list, o que é esse checkbox options? Deixa eu ir para o formulário, estou aqui no formulário. Formulário checkbox list, check options, vem do estado desse cara, this.state, significa o estado do formulário, vamos ver o que está dentro. This.state.frutas, vou lá em cima, state, chega o estado inicial, que eu vou usar como referência. Então você note que o estado inicial frutas é um objeto que tem cada, cada, cada propriedade é o nome, o valor da fruta que tem nas opções, então a gente vai ter que também criar esse objeto fácil e passar para o checkbox list. Então vamos lá, depois de options aqui, vou criar outra variável, vamos criar essa variável, check options, vai ser só um objeto, vamos abrir aqui esse options de novo para ver que as opções tem uma mão, banana e morango, então a gente vai ter que adicionar aqui, uma mão, se eu botar tudo falso, banana, morango, note que tem que ser a mesma coisa desses valores aqui da lista de frutas, opções. Se você quiser botar true ou false, pode botar também, não importa aqui, então deixa assim, é só valores falsos, aí aqui vai check options, check options de novo, mesmo nome, então pode deixar mais curto assim. Agora finalmente, esse onChange, volta lá no formulário lá embaixo do formulário, desse onFluTestChange, está passando um, uma função aqui chamada, desse onFluTestChange, a gente não precisa definir nenhuma função, é só passar uma função de mock, se você quiser eu normalmente faço, pode passar uma função vazia, função de mock, qualquer coisa, vou botar jas.fn, essa aqui é um fn, é o método do jas que cria uma função de mock, eu gosto de fazer isso, então deixa aí, onChange vai ser onJas.fn, isso retorna uma função de mock. Então a gente terminou de definir as props falsas para poder passar para o checkbox list, como a gente vai passar isso agora? Bem simples, você pode pegar para poder copiar todas as propriedades desse objeto chamada props, é só colocar aqui no jsx dessa maneira, abrir a chave, três pontos e o nome da variável, nome do objeto que você quer copiar as propriedades, da onde você quer, então vai copiar as propriedades que nem label option, check options de onChange, e vai passar para o checkbox list. Certo, e com isso a gente termina a definição inicial de para montar o checkbox list antes de fazer os testes. Então por essa aula só, na próxima aula nós vamos começar a escrever o nosso primeiro teste. Então até lá, tchau!