Crear RadioGroup con RadioButtons usando React con TypeScript

Tiempo de lectura: 2 minutos

Vamos crear un componente de RadioGroup compuesto a su vez de RadioButtons.

Primero vamos a crear el componente RadioGroup.

import React, { useState } from 'react';
import RadioGroup from './RadioGroup';  // Ajusta la ruta según tu estructura de archivos
import RadioButton from './RadioButton';  // Ajusta la ruta según tu estructura de archivos

const TuComponente = () => {
  const [genero, setGenero] = useState(""); // Estado para manejar la selección del género

  return (
    <RadioGroup
      title={"Ejemplo para DevCodeLight"}
      radioButtons={[
        <RadioButton
          key={"Hombre"}
          id={"Hombre"}
          label={"Hombre"}
          value={"Hombre"}
          checked={genero === "Hombre"}
          onChange={(event) => {
            const newValue = event.target.value;
            setGenero(newValue); // Actualiza el estado con la nueva selección
          }}
        />,
        <RadioButton
          key={"Mujer"}
          id={"Mujer"}
          label={"Mujer"}
          value={"Mujer"}
          checked={genero === "Mujer"}
          onChange={(event) => {
            const newValue = event.target.value;
            setGenero(newValue); // Actualiza el estado con la nueva selección
          }}
        />
      ]}
    />
  );
};

export default TuComponente;

Ahora creamos un componente RadioButton como muestro a continuación:

import React from 'react';
import { rojoerror } from '../../constants/Colors';  // Ajusta la ruta según tu estructura de archivos

interface RadioButtonProps {
  id: string;
  label: string;
  value: string;
  checked: boolean;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  showError?: boolean; // Nueva propiedad para mostrar el error
}

function RadioButton({ id, label, value, onChange, checked, showError }: RadioButtonProps) {
  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    onChange(event);
  };

  return (
    <div>
      <input
        type="radio"
        id={id}
        value={value}
        checked={checked}
        onChange={handleInputChange}
        style={{
          borderColor: showError ? rojoerror : 'initial',
          color: showError ? rojoerror : 'initial',
          fontWeight: showError ? 'bold' : 'normal'
        }}
      />
      <label htmlFor={id} style={{ color: showError ? rojoerror : 'initial' }}>{label}</label>
    </div>
  );
}

export default RadioButton;

Después vamos a usar los componentes de la siguiente manera.

import React, { useState } from 'react';
import RadioGroup from './RadioGroup';  // Ajusta la ruta según tu estructura de archivos
import RadioButton from './RadioButton';  // Ajusta la ruta según tu estructura de archivos

const TuComponente = () => {
  const [genero, setGenero] = useState(""); // Estado para manejar la selección del género

  return (
    <RadioGroup
      title={"Ejemplo para DevCodeLight"}
      radioButtons={[
        <RadioButton
          key={"Hombre"}
          id={"Hombre"}
          label={"Hombre"}
          value={"Hombre"}
          checked={genero === "Hombre"}
          onChange={(event) => {
            const newValue = event.target.value;
            setGenero(newValue); // Actualiza el estado con la nueva selección
          }}
        />,
        <RadioButton
          key={"Mujer"}
          id={"Mujer"}
          label={"Mujer"}
          value={"Mujer"}
          checked={genero === "Mujer"}
          onChange={(event) => {
            const newValue = event.target.value;
            setGenero(newValue); // Actualiza el estado con la nueva selección
          }}
        />
      ]}
    />
  );
};

export default TuComponente;

Por último muestro como queda el resultado.

Espero que les sirva de ayuda. ¡Que tengan un feliz día!