Resumo do Transcript

muito estranho né então se você notar esse cara aqui na verdade é undefined né porque não está definido mas o que acontece esse cara foi undefined se só vai ver parece que não afeta deve ser undefined eu acho que não está sendo controlado essa checkbox não é controlada pelo state então se você botar false por exemplo o sinal de que não dá para marcar então devia esse é o problema estava sendo undefined não estava sendo controlado a marcação ainda funcionava porque a gente usava o valor em vez do check não é mas se quiser correr corrigir isso deve ser uma ação tá bom desculpe pelo erro mas ainda funciona direitinho é só o a marcação aqui que é ter que ser controlada pelo state corretamente controlada não pode ser indefinido se for indivíduo o check não vai ser controlado cada vez que clica vai marcar ou desmarcar sem importar sem se importar com o state tá bom vamos continuar o que a gente tinha em mente então os vales aqui vão ser diferentes para cada componente então vamos pôr todos os vales em uma chamada de opção por exemplo a gente também pode incluir o label para cada opção que é diferente não é então a gente vai fazer um objeto dessa maneira sim por exemplo vamos fazer um objeto aqui se aumentar esse objeto vai ter um label e vai ter por exemplo banana e vai ter um value banana dessa maneira cada um desses vai ser um objeto então vamos fazer um array de objetos para incluir na nossa options são alguma coisa desse tipo e a gente vai dar um loop né para cada um objeto a gente vai fazer uma criar um checkbox nesse caso vai ser três repetições ou interações né o ontem já é comum a todos outra coisa que muda esse check talvez a gente use o value para acess para saber qual o nome da variável da mesma gente fez no ontem de você se lembra a gente usou esse cara sim para pegar o value o valor da variável foi substituído com pra ser aqui a chave do objeto voltando aqui então vamos lá não copiar só um deles e o que a gente espera fazer vamos lá escrever checkbox box list vamos passar o que sei lá a opção ou alguma coisa você quiser a opção é bom vai ser uma array de objetos e deixa eu definir a variável chamada fruta options o ontem de que vai ser o que desse ponto um frutas change o mesmo para todos tá bom você pode definir também o nome se quiser nesse caso botar frutas assim o mesmo nome comum a todos bom agora vamos definir fruta options indo lá em cima antes do render do return dentro do render mais antes do return não põe depois de returns não vai dar eu tá bom vamos definir o fruta options como uma array de objetos tá bom primeiro vai ser a banana é label banana banana e qual vale sim tá bom a mesma maneira para os outros vou copiar esse objeto um dois e três mudar isso vai ser o que é maçã cadê seis bom e esse cara vai ser o que é o rango porque isso vai entrar no loop no react normalmente a gente quer a gente adiciona o id para ser identificador exclusivo de cada opção tá bom vai ser usado como aqui do nosso mapping a gente vai usar a função map dentro do checkbox list então por favor adiciona o id tem que ser exclusivo diferente para cada objeto tá bom definimos fruta options vamos aqui que é isso notifying a gente não definiu ainda não importou mas deixa lá o erro vamos aqui nem frutas options não change precisar de mais alguma coisa talvez a gente lhe dê com check da maneira que a gente falou usando o value do fruta options do que estiver no loop a vamos aqui no checkbox list só copiar esse aqui você tem uma referência aqui tá bom então aqui esse cara vai tornar o que a gente tem que dar um map para cada para criar as checkboxes né então vamos fazer aqui checkboxes vai ser o que vamos pegar o props ponto que os options vamos fazer um loop do options para cada opção vamos dar um map o map vai criar uma nova array com e cada elemento vai ser a transformar a transformação de cada elemento do options nesse caso falar chamar de options singular passar a função de flash tá bom como é que a gente a gente tem que retornar o o elemento da array transformado transformado nesse caso deixa só copiar o fruta options para você entender um deles aqui então esse opção o primeiro vai ser esse aqui esse objeto esse objeto vai para essa variável e a gente vai usar esses valores dentro do objeto para criar um checkbox bom nesse caso a gente vai dar o return checkbox com o que todos esses valores são acertados então checkbox tem o que checkbox tem um name né qual é esse name a verdade o nome é dado pelos props do checkbox list props ponto name deixa eu voltar isso dentro do parântese para ficar melhor de ver e quero ver isso em novas linhas vai ter o name a gente tá checkbox ok qual é o lebo aqui vai ser o option né ponto lebo o value vai ser o que option ponte value que se refere esse aqui que se refere a esse que é a banana esse caso aqui esse banana primeira letra maius e aqui esse banana todos os letras e nos duas é bom que mais voltando a que eu já esqueci as outras props até fizemos nome label value agora um change o cheque voltando aqui o um change vai ser dado pelo checkbox list que vai ser acessado no props então lá um change props ponto um change já e agora o como é cheque vai ser o que dado pelo estado né como a gente vai fazer esse cheque voltando aqui e note que eles tem o vez ponto state por frutas em comum então talvez a gente pode passar o e o state vamos pensar nisso porque cada um tem um diferente é mais esse parte que é incomum já que a gente está mantendo o state no componente app e não no componente checkbox list aí fica um pouco não é desafio né vou te dar um tempo de pensar e a gente vai continuar próximo vídeo