Agora vamos continuar e dar uma olhada nos botões de radio. Nesse caso eu vou adicionar os checkboxes. Voltando aqui ao navegador eu vou para o nosso react app. Se você não tem o Z, o logo é definido, mas não é usado. Vamos só remover ou comentar isso. Se você quiser eu vou tirar o logo, tirar a CSS também. E se eu comentei, se você quiser remover pode fazer. Voltando no navegador não tem mais warning. Uma coisa que eu não gosto é que não tenho padding. Fica muito grudado com o final. Então vou adicionar um padding manualmente. Porque o nosso foco aqui não é estilo, mas eu vou adicionar nessa div. Que contém todo o formulário. Um estilo, style. Você tem que passar um object, JavaScript. Porque a gente está lidando com um estilo inline do react. Vou botar um padding. Cineote que esse é o CSS, mas o JavaScript tem que botar a camel case. Padding left com quotes. Vou botar 6 pixels. Vou ver. Ficou melhor. Deixa eu botar 12. Ficou melhor. Agora deixa eu ver aqui. Normalmente vamos falar do HTML puro. Normalmente você tem os botões de rádio. E cada o nome de todos os botões. Se for para um exemplo gênero da pessoa masculino ou feminino. Você tem que botar o nome. Deixar como mesmo nome, mas com um valor diferente. Vamos copiar esse cara aqui. Desculpa. E a gente vai fazer esse aqui. Vou para o app.js. Cineote que a gente está fazendo tudo no src.app.js. Depois do checkbox. Vou adicionar aqui gênero. Vou botar um br aqui. Quebra a linha. A vacinote que dá um erro. Ele precisa de uma closing tag, de fechar a tag. Porque no react todos os componentes tem que ser fechados. Tá bom? Um detalhe diferente do HTML5. Puro HTML. A gente já é no masculino feminino ali. Se quiser adicionar uma br aqui também. E outro. Pode adicionar um label. Aparece que o label não está sem estilo. Deve ser porque o estilo é definido do index. Não sei. Qualquer maneira vamos continuar. Vamos focar na funcionalidade não no estilo. Então, a gente quer escolher um deles. Agora não está controlado. Porque a gente não definiu o nosso próprio own change. E nesse caso para checkbox. No caso para o rádio da mesma maneira que checkbox. Vai ter esse check. Esse atributo ou propriedade. Como chamamos no react. Todo elemento do HTML no react a gente chama de componente. E todos os atributos desse elemento. O componente a gente chama propriedade. Então propriedade checked. Vai definir. Vai falar esse cara está checked por padrão. Você vai ver que já está lá. Deu um morning aqui. Você deu um checked mas não definiu o own change. Só queria demonstrar se eu mudar o checked para o outro. Vai ser marcado por padrão. Inicialmente. Deu uma quebra de linha para tudo aqui. Para melhor. Você note que não dá para acessar o outro. Porque o checked está fixo nesse cara no masculino. Então a gente vai ter que controlar esse valor do checked. Da mesma maneira que a gente controlou o checked das checkboxes. Das caches. Nesse caso a gente vai manter o estado para o gênero. Nesse caso a name in general. Vamos definir no estado. Lá lá acima. Gênero. Nesse caso o valor vai ser só um string. Então vou botar inicialmente. Você pode definir o valor que estiver marcado por padrão. Por exemplo masculino. Nesse caso o gênero vai ser padrão. Inicialmente masculino. O feminino. Vai inicialmente ser feminino. Mas agora para a gente fazer esse cara funcionar a gente tem que definir. Controlar o checked desses caras. Então aqui para o check. Deixa eu aumentar a tela aqui. Para o checked do masculino. Vai ser o des. Ponto state. Ponto gênero. Se for igual que o masculino. Esse cara vai estar check. Marcado somente se o gênero que está contido no estado for ter o valor masculino. Da mesma maneira por favor você faz com o feminino. Vou esperar um pouquinho. Você faz. E aí deu certo. Vamos lá definir o checked. O feminino vai ser checked. Se o des.state.gênero. For igual a. Feminino. Feminino. Salvar. Vamos testar. Você não acha que já mudou para o feminino? Para o padrão. Vamos lá acima nos states. Para mudar e ver se funcionou. No caso inicialmente é feminino. Vamos mudar masculino. Vamos salvar e ver o que acontece. O senote inicialmente é masculino. E se não botar nada. Acho que nenhum vai marcar. Vamos ver. Porque o valor é string vazia. Que não dá igual masculino. Falso. Não dá igual feminino. Falso também. Não vai estar marcado. Voltando aqui. Masculino. Agora. A gente clica mas não acontece nada. Porque a gente ainda não definiu. O change. Vamos lá definir. Da mesma maneira que eu vou definir os outros. Eu vou seguir o meu padrão. Aqui assim eu defini. O general change. Sempre dessa maneira. O meu padrão você pode fazer o seu próprio padrão também. Não importa o nome. Não importa o nome da função. General change. E... Vamos definir depois de conectar esse on change. Vamos lá embaixo. Vamos adicionar a propriedade on change para ambos. O. Masculino e o input feminino. Vamos adicionar on change. Vai ser. Vamos conectar. Agora o componente é realmente controlado. Só. Resta a gente. Definir a função. Nesse caso. Se eu dar um console. Event.target. Quem aqui vai ser? Vai ser aquele que foi clicado. Que foi selecionado. Vamos só confirmar. Se esse é o caso. O que é o caso? Vamos confirmar. Se esse é o caso. Dá um console log. Quando clica. Fecha. Se dá. Aqui. Tá bom. Então. Clica feminino. Você note que já. Deu console log do. Que ele que foi clicado. Agora o que a gente vai fazer? A gente vai checar o que? Nesse caso. Vai ser bem simples. Mais simples que o checkbox. Porque você pode. Solamente selecionar uma das opções. Mas não múltipla escolha. Porque se é uma única escolha. A única coisa que a gente vai fazer. É definir o novo estado. Então a gente vai dar um set state. Pro gênero. O valor do input que foi clicado. Nesse caso. Se você clicar feminino. Vai ser. Válio feminino. Então pega esse feminino. E põe no gênero. Do estado aqui. Se você clicar masculino. Da mesma maneira. Pega o value. Nesse caso masculino. E. Atualiza o gênero do estado. Para ser masculino. Tá bom? Bem simples. Botão de haja. Então vamos lá. Um gênero change. Deixa eu. A gente vai falar desse set state. Nesse caso gênero. Vai ser o que? Vai ser avan. Target. Value. Nesse caso. Depois disso. Vamos fazer um console log. Só para ver se atualizou. Realmente atualizou o estado. Você note que o segundo argumento para o set state é a função callback. Que você quer que essa que Execute. Depois de setar o state. Nesse caso. Eu quero dar um console log. Event. Não event to target. Mas o estado. Gênero. Deixa eu aumentar até o gênero. Deixa eu aumentar até ela aqui. Se a gente vai atualizar o estado com o novo valor. E depois disso a gente vai dar um console log. Vamos lá. Será assim onde é feminino? Você note que mudou para feminino e o novo estado é feminino. O que é masculino? Agora o novo estado é masculino. Feminino. Masculino. E assim. O diante. Está tudo funcionando. Acerto. Então esse é. O componente controlado. Do botão de rádio. Do react. Bem simples. Só setar o valor no estado. O valor é dado por cada. Pelo componente que foi clicado. Feminino. Ou masculino. E assim por diante. Bem mais simples que o checkbox. Porque o checkbox. Checkbox é muito tipo escolha. Por isso fica um pouco mais complicado. Mas o rádio. É só uma única escolha. Exclusiva. Você pode escolher somente um dos. Das opções. Disponíveis. Por isso que fica muito mais simples. Você pode dar um refactor. Talvez ponda esse cara em uma variável. E assim por diante. Eu vou deixar o refactoring. Como exercício para você.