anteriorpróximo
Aula 20
Cursos / React: Componentes Controlados
Curso React: Componentes Controlados

Summary

Debugging a Radio Button Component

Symptoms

  • The issue arises when a radio button option is clicked; it triggers the On Change event.
  • The On Change correctly updates the state of the app component.
  • The problem is with the checked state of each radio button, which is not updating as expected.

Investigation Steps

  1. Initial Check:

    • The focus is on the radio list.
    • Attempt to set all radio options to True does not yield results.

  2. Logging for Debugging:

    • A console log is added for check option to ensure it's referring to the correct values.
    • Both "Masculino" and "Feminino" are checked and appear correct.

  3. Configuration Issue:

    • The snippet isn’t configured correctly to retrieve the option value dynamically; it should be within the mapping function.

  4. Detailed Logs:

    • Log check option values to trace which options are being checked.
    • The correct option value is assigned for "Feminino".

  5. Fixing Compile Errors:

    • An error with Fail to compile occurs due to missing parentheses when handling multiple arguments.
    • Correct variable interpolation is used to set values as C0, C1, etc., corresponding to the index.

Findings

  • The logs show that:
    • Check for index 0 returns true.
    • Check for index 1 returns false.
  • The checked states are functioning as intended.

Next Steps

  • Check the hardware component's checked and value properties to determine what might be causing the discrepancy.
Scroll down above for more

Video Transcript

Então vamos debugar. Qual o sintoma aqui? Clica em uma opção, está chamando On Change. O On Change muda o estado do componente app. Isso está funcionando. O problema parece ser na opção checked do cada botão de radio, que não está dando marcação, não está marcando. Então aqui no radio list, esse cara parece não estar funcionando. Vou ver o que acontece se eu botar True para todos os listos, para todos os Rades. Não acho que não aconteceu nada. Vou dar um console log aqui, da check option. Check option, para ver se está se referindo ao correto. Masculino está marcado, correto. Feminino, então está certo. Vamos ver, opa, não tinha meu snippet configurado. Vamos ver o option plant value. O option value, mas esse cara tem que ser dentro do map. V. Feminino é option value. Option value é feminino. Espera aí, que está confundindo aqui. Vamos ver aqui, para ver isso de novo. Está vindo check option masculine, option value masculine. E depois, option value é feminino, que faz sentido, cada option é pot value. Vai dar um loop. Vamos dar console log, checked. Vou adicionar index aqui. Depois da option, vou adicionar index, vou adicionar checked. Numero index assim. E vai ser o que? Option. Quero comparar, quero dar um console log desse cara. Aqui, soft wrap para você ver melhor. Fail to compile, porque... Vou adicionar index assim, esqueci disso. Ah, desculpe, quando tem mais de um argumento, você precisa de parênteses aqui. Salvar, note que eu dei interpolação de string aqui para substituir o value de index. O valor para C0, C1, C2, por diante, nesse caso vai ser 0 e 1, porque só tem 2. Então, check do zero é true, check do 1 é false. Então, esse negócio está funcionando. Está dando true, está dando false para o outro. E o que é que está havendo aqui? Vamos lá para o hardware. O hardware tem um checked, tem um value. O que será que está acontecendo? Vamos ver.
See more
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação:
Quero contribuir