Então, uma maneira de a gente solucionar esse problema é passar des.state.frutas como o próprio para o checkbox list. Por exemplo, eu posso aqui, só check state ou qualquer nome que você quiser, o checked options, sei lá. Por exemplo, des.state.frutas, tá bom? E esse cara vai estar disponível, que é um objeto dentro do checklist, dentro do props. Então, vai ser... Essa checkbox será marcada se o que é. Se a gente vai comparar o props.checkedOptions. Mas qual é a opção? Porque tem várias, né? Na hora de que o checked options, nesse caso, é o estado frutas, que é um objeto e tem várias opções. Mas cada... Porque é um objeto, tem paras de chave e valor, propriedade e o valor. Propriedade é o que a gente está interessado. Para cada um tem a propriedade diferente. Noite banana é o valor passado para o checkbox list dentro da fruta options. Tem um value. Banana, maçã e morango. Esses caras são o mesmo. Tem o mesmo nome das propriedades da fruta. Então, o que a gente vai fazer? Voltando ao checkbox list, eu vou fazer assim. Abrir o square brackets e vai ser o que? Vai ser option.value. Que é o option.value? Esse cara aqui, por exemplo. Então, se for a banana, esse cara option.value vai ser substituído aqui e vai se tornar assim. O checked options.banana, que na verdade esse aqui é o que? É o app. O app.state.fruits.banana. Por isso que vai funcionar. Entendeu? E como esse valor é boolean, true ou false? Verdade ou false? Vai determinar se está marcado ou não. Nesse caso, poderia ser true ou pode ser false? Certo? Retornando ao código anterior. Bom, sim, a gente vai fazer. Salva isso. Está certo? Então, a gente vai dar o map para criar cada checkbox e vai ser um array de checkboxes. Porque o react é muito inteligente, você precisa só dizer checkboxes no return. O react vai saber que você tem um array de componentes e vai renderizar cada componente um por um. Vamos ver se vai funcionar. Vamos voltar para o app e importar. Na verdade, não precisamos mais de checkbox aqui, mas vamos revolver depois. Vamos botar checkbox list.from.checkboxlist. Vamos ver se não deu nenhum erro. O que que aconteceu? O checkbox não é definida. Ah, esquecemos de definir checkbox dentro do checkbox list, porque estamos usando aqui. Então, vamos lá. Vem aqui em cima, import checkbox.from. O mesmo direitório, não é? Aqui. Check. Opa. Check. Certo? E agora o que aconteceu? Deu um erro aqui. Deixa eu tirar isso. Opa. Opa. A valed react element means be return. You have return undefined. O que que aconteceu? Ah, se lembra daquele negócio? Vamos ver. Você pode retornar uma coisa. Não várias. Será que funciona? Deu certo. Deixa eu diminuir isso. Então sempre se lembre de botar um div para incluir vários elementos que você quiser retornar. Certo? Tudo apareceu aqui. Senote. Tudo ok? Mas tem um award aqui. Each child. Nenorator, iterator, bla, bla, bla. Tem que ter um aqui exclusiva. Por isso que eu adicionei o ID ao objeto da cada checkbox. Então aqui react. A gente sempre que fazer map para criar novos componentes a partir de coisas como objeto, por favor, inclua um aqui aqui. E tem que ser único, exclusivo, tem que ser diferente para cada option. Por favor, não use o item. Se o index da array, tá bom? Normalmente não é porque o segundo argumento que é o index, se tiver um da array de options, não é recomendado usar isso. Principalmente se você se a lista de opções mudar em tempo real e você adicionar ou remover elementos dela. Se quiser saber mais, por favor, leia a documentação do react sobre isso. Então vamos em frente. Aqui tem que ser um ID normalmente, identificador único, exclusivo. Vai ser o ID de quem? Do option. Certo? Isso vai resolver esse problema aqui, voltando lá. Não tem mais erro. Note que esse cara aqui é o checkbox list e esse aqui é cada checkbox individualmente do nosso código do app. Eles estão lado a lado. A gente não removeu os outros. Esse cara aqui são esses caros aqui e esses outros são os outros. Você nota que eles são, quando marca uma a samba, também marca a outra, porque eles se referem às mesmas variáveis do estado. Então para confirmar que está funcionando, você nota que os outros também funcionam. Então não teve nenhum problema. O que é isso? É o curso. Então está tudo ok. Você teste aqui, vê se não deu problema. Certo? E quando tudo está ok, você pode remover esses outros caros e fazer uma limpeza aqui. Só o checkbox list. Vamos lá em cima remover os import. O import do checkbox que já não é mais necessário. Tudo legal. Olha como o código fica muito melhor. E ainda dá para incluir esse label aqui se quiser dentro do próprio checkbox list. Então vamos lá. Vou remover esse cara aqui. Vou pegar com br também. Se quiser. Na verdade, vamos adicionar aqui o label. Puta que eu gosto, eu vou recortar esse br aqui. Puta que eu gosto. Só vá voltando ao checkbox list, eu tenho que pegar o props.label. E adicionar antes da checkbox. Isso aqui no return, do checkbox list. Adicione o label. Ah, desculpa. Você só adiciona props.label com br aqui. Vamos ver se funcionou. Ele está dando aí. Normalmente você pode... Ah, está tudo ok. É. Tem um label aqui. Se quiser adicionar estilo pode botar dentro do spam ou do um label. Mas o label já está associado com cada um desses caras. Então depende de você. Sei lá. Style. Vou botar aqui. Como é que eu ponho a underline? Já esqueci. Ah. Pode botar wait, underline, italic. Sei lá. Já esqueci se essa é a scoove. Tax Decoration. Ok, tax decoration. Overline, line through, underline, underline. Vamos ver como é que isso parece. Vou botar dentro do spam e ponho br aqui. Voltando aqui. Opa, desculpe. Não é aqui. E o deu erro? Opa. Esqueci desse cara aqui. Certo? Frutas que gostam e assim por diante. Entendeu? Já aprendi porücken. Certo? Secho set!