Como usar radio buttons em React JS?

Neste artigo você aprenderá a como utilizar radio buttons em React JS, um input muito importante dos formulários

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Os radio buttons são uma forma eficaz de oferecer aos usuários uma lista de opções limitadas a uma única seleção.

Em React JS, é comum encontrar desenvolvedores lutando para gerir o estado desses elementos de formulário.

Neste artigo, você aprenderá como lidar com radio buttons em React JS de maneira otimizada e moderna.

Compreendendo o Funcionamento dos Radio Buttons

Radio buttons funcionam como um grupo de botões que permite ao usuário escolher apenas uma opção entre várias.

Quando o usuário seleciona um novo radio button, o anteriormente selecionado é automaticamente desmarcado.

Inicializando o Componente com Estado

O primeiro passo para gerir radio buttons em React JS é criar um estado para o valor selecionado.

Utilizaremos os Hooks do React, especialmente useState, para armazenar esta informação.

Exemplo Básico com useState

import React, { useState } from 'react';

const RadioButtons = () => {
  const [valorSelecionado, setValorSelecionado] = useState('');

  return (
    // código do componente
  );
}

Implementando os Radio Buttons

Agora que temos o estado inicial, podemos começar a implementar os radio buttons.

Lembre-se de que, para que funcionem como um grupo, todos os radio buttons devem ter o mesmo atributo name.

Exemplo de Radio Buttons

const RadioButtons = () => {
  const [valorSelecionado, setValorSelecionado] = useState('');

  const handleChange = (event) => {
    setValorSelecionado(event.target.value);
  };

  return (
    <form>
      <label>
        <input
          type="radio"
          value="opcao1"
          checked={valorSelecionado === 'opcao1'}
          onChange={handleChange}
        />
        Opção 1
      </label>
      <label>
        <input
          type="radio"
          value="opcao2"
          checked={valorSelecionado === 'opcao2'}
          onChange={handleChange}
        />
        Opção 2
      </label>
      <label>
        <input
          type="radio"
          value="opcao3"
          checked={valorSelecionado === 'opcao3'}
          onChange={handleChange}
        />
        Opção 3
      </label>
    </form>
  );
}

Melhorando a Reutilização

O exemplo acima é funcional, mas podemos torná-lo mais reutilizável.

Em vez de codificar as opções diretamente, podemos armazená-las em um array e mapeá-las para renderizar os radio buttons.

Exemplo com Reutilização

const RadioButtons = () => {
  const [valorSelecionado, setValorSelecionado] = useState('');
  const opcoes = ['opcao1', 'opcao2', 'opcao3'];

  const handleChange = (event) => {
    setValorSelecionado(event.target.value);
  };

  return (
    <form>
      {opcoes.map(opcao => (
        <label key={opcao}>
          <input
            type="radio"
            value={opcao}
            checked={valorSelecionado === opcao}
            onChange={handleChange}
          />
          {opcao}
        </label>
      ))}
    </form>
  );
}

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Neste artigo, vimos como implementar radio buttons em React JS de maneira otimizada e moderna.

Utilizamos os Hooks de estado para gerir as seleções e garantimos que nosso componente seja reutilizável e fácil de manter.

Além disso, aprendemos a importância de usar o mesmo nome para os radio buttons para que funcionem como um grupo e de gerir o estado da seleção através do React.

Estes passos são fundamentais para criar uma interface de usuário intuitiva e eficaz.

Lembrando sempre que a melhor prática é fazer uso dos recursos mais modernos e otimizados que a biblioteca React JS oferece, asseguramos que o nosso código seja eficiente, legível e fácil de manter.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.