Um momento
Aula 21
Cursos / React: Componentes Controlados
Curso React: Componentes Controlados

Summary

Resumo do Transcrito

O usuário está depurando um código que envolve botões de rádio e identifica um problema de conflito. Aqui estão os principais pontos discutidos:

  1. Questão Inicial:

    • Ao clicar nos botões de rádio, apenas o botão inferior funcionava.
    • O problema foi identificado como um conflito entre os botões com o mesmo valor e nome ("gênero").
  2. Solução Proposta:

    • Remover as opções duplicadas resolveu o problema, pois havia dois botões de rádio para "feminino" e "masculino" com o mesmo nome.
  3. Aprendizados:

    • O processo de depuração com console.log() foi discutido, embora não tenha resolvido o problema principal.
    • A importância do segundo argumento da função map, que é o índice do array.
  4. Código e Estruturas:

    • O usuário realiza uma limpeza do código, removendo console.log() desnecessários.
    • É enfatizado que um retorno implícito pode ser usado ao retornar componentes em funções de seta. Ao retornar, é possível omitir chaves e usar parênteses para simplicidade.
  5. Finalização:

    • O usuário menciona a necessidade de verificar um erro que surgiu: "Expected token" durante a execução do map.

Este resumo aborda os principais pontos de aprendizado e as soluções apresentadas pelo usuário durante o processo de depuração.

Video Transcript

Então, se você notar que, se eu clicar nesse cara aqui, só o de baixo funciona, não é? Mas se eu clicar no de baixo, olha o que acontece. Mas o que está acontecendo aqui? Estamos loucos? Não, o problema é que no name, esse cara aqui, a gente tem o radio list. Mas também tem o radio, mas os caras estão duplicando, esses caras estão dentro do radio list. Por isso que está dando conflito aí. Os caras são os mesmos, então vamos remover eles e ver o que acontece. Agora está tudo funcionando normal, não é? O problema era o conflito dos opções que tinham o mesmo valor. Tava no mesmo name, tinha o mesmo nome que era gênero. E tinha duas botões de radio com o mesmo valor e dois botões de radio com o mesmo valor feminino. Dois masculinos, dois femininos, para o mesmo nome que é gênero, então dava um conflito, então remova os e vai funcionar normalmente agora. Espero que tenham gostado do debug aí, aprendemos console logs. Nem que tinha inicialmente resolvido problema, mas aprendemos a dar um console log, debug e interpelação de string dessa maneira e sobre o segundo argumento da map, função de map, que na verdade é o índice da array. E sempre precisa se tiver mais de uma opção, tem que ter parênteses. Vou removê-los agora, que não precisamos mais de debugar. Remover o console log, certo? Dessa maneira. O que é isso aqui? O one-radar-fan nunca irá usar? Vamos lá voltar no app. Não precisamos mais usar esse rádio, então vou remover os imports do app para tirar o warning, certo? Mais uma coisa aqui, só de leve essa fatoração. Normalmente se você tiver uma função de flash, por exemplo, aqui no map e se você não fizer nada antes do return, você pode ometer, tirar essa aqui. Isso é retornar o componente aqui. Como? Pega esse cara assim, põe aqui e põe assim. Dessa maneira assim. Entendeu? Não precisa das chaves. É só botar o parênteses aqui e o componente dentro. Já retorna esse cara aqui. Implicit return, a gente chama. Implicit return. Da função de flash. É o retorno implícito. Por exemplo, assim. Retorna a, é a mesma coisa assim, certo? Já é o retorno implícito da variável chamada a. Remove as chaves e deixa só a coisa que você quer retornar. É a mesma maneira aqui do componente. Porque é um componente que a gente precisa dos parênteses. Entendeu? Se você quiser retornar o objeto, por exemplo, também precisar do parênteses. Porque se não confunde com a chave da função, que vai dar problemas para esse do parênteses, retorna esse objeto chamado João. Mesma coisa desse aqui. Certo? Return João. Mesma coisa. Proceder. Salvar. Voltar aqui o web. Ah, o que é que aconteceu aqui? Expective token. Não sei o que. Map Option. Deuejo. Deuejo. Vamos ver.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: