Na mesma maneira que nós criamos o componente chamado checkbox list, nós também podemos criar radio list, uma lista com vários botões de rádio. Então em vez de ter esses dois rádios aqui, podemos criar um componente de enérico para criar aqui uma lista de botões de rádio. Se você dá as opções da mesma maneira que a gente fez com checkbox list, com o label e o value de cada botão de rádio, dá para fazer um componente de enérico. Então vamos começar, iniciar o nosso desenvolvimento, criar um arquivo chamado radio list.js dentro da parte da src e de novo o boilerplate port react from react sempre precisa do react, define a função, componente funcional, desculpe eu vou ter rádio, react from react e radio list props e desporta, certo retorno template. Antes de retornar a gente vai fazer um mapping da mesma maneira de checkbox list, se você não se lembra vou aqui no checkbox list, você note que tem esse mapping aqui, da mesma maneira a gente vai receber opções como props, muito similar, parecida da mesma maneira assim, cada opção vai ser um objeto que tem o id, label e o valor, gente vai fazer um map para criar componentes, nesse caso vai ser rádio, então vai precisar do rádio import rádio from radio aqui, vamos lá, criar uma variável chamada radios, vamos lá props.opções.map, cada objeto opção, vamos retornar o que? uma rádio, certo vamos definir os props aqui, vamos voltar aqui um pouco para o app, só para ver, então o que a gente aqui, a gente definiu componente que a gente vai usar dessa maneira aqui, radio list, note que o nome é o mesmo, então esse cara aqui, vamos copiar, vai ser o mesmo para todas as botões de rádio, mas o label e o value vão mudar, não é? então a gente pode passar options, vamos chamar, sei lá, general options, que vai conter o label e value para cada opção, isso note que o one change é o mesmo, então deixa eu copiar, o one change vai ser desse, um general change, o checked, vamos ver o check, o checked é, compara sempre esse aqui com o valor, do próprio rádio aqui, o valor, então a gente pode talvez dar um checked option para ser o state aqui, entendeu assim, check option vai ser, só o state, qualquer coisa, o que tiver definido no estado vai ser a opção que está marcada, entendeu, e a gente vai dar essa checa do checked dentro do próprio, quando a gente criar os componentes de rádio, está faltando alguma coisa, a gente deu one change, as options, o name assim por diante está tudo ok, vamos lá para o radio, certo? Voltando aqui, deixa eu só copiar isso para ter um referência, então, primeiramente para cada opção vamos criar um rádio, o rádio vai ter o nome de todos, como prop ao rádio list, que vai ser dentro do props.name, o rádio tem o que mais, deixa eu copiar o radio aqui, já tinha, copiar ali para ter referência também, o rádio tem o name, fizemos o name, tem um label e tem um value, então vamos fazer o label, qual o label aqui, vai ser o option ponto label, a gente ainda não definiu o general options, depois disso aqui a gente vai definir, vamos lá fazer o value, vai ser da onde, vai ser do próprio rádio, que é a opção, que está dentro da opção, option ponto value e o checked, então checked, esse botão vai ser checado se o que, se a props.checked option foi igual ao valor desse rádio, nesse caso o option ponto value, por exemplo, se esse rádio tivesse valor masculino, esse aqui seria masculino, iria comparar com a propriedade do estado, se a propriedade do estado estiver masculino também, significa que esse botão está marcado, se não, não está marcado, entendeu? Voltando aqui, on change vai ser dado pelo próprio rádio list, voltando aqui, props, se afetar as propriedades dadas ao rádio list, on change, entendeu? Mais uma coisa, a gente está usando o map, se lembra que o react, se a gente fizer o map, dessa maneira a gente já precisava do quê? Do anki, nesse caso a gente vai usar aqui de cada opção, o id, tem que ser sempre um identificador exclusivo, diferente para cada opção, certo? E finalmente depois de fazer as our rady rádios, dá um return aqui, vamos pôr tudo dentro o endive com os rádios, certo? Vamos aqui, voltando ao app, vamos ver se vai funcionar, opa, rádio list não está definido, vamos lá para cima e portar, rádio list, ah, general options não está definido, esquecei de definir general options, vamos aqui, da mesma maneira que a gente criou o fruto options, vamos definir general options, array de rádios, object é o id, label, qual era o primeiro? Asculino eu acho, e tinha um valor, certo? Cria outra opção, opa, é menina, certo? Criamos, vamos salvar, e agora vamos testar, opa, parece que está funcionando, mas o check não está, o que que aconteceu? Opa,