2 类型：单击时改变颜色的单选按钮 React

Question

I want to make a component, where there are two options, and when you select one, the color of the buttons gets switched, currently, I'm trying with Inputs of type: radio, but I would like to know if there is any other way to do it with react.

import React, {useState} from 'react'

function BotonCambioPerfil() {

    const [gender, setGender] = React.useState('Famale');

    const handleCatChange = () => {
        setGender('Male');
      };
    
      const handleDogChange = () => {
        setGender('Female');
      };

  return (
    <div className='contenedorBotonCambioPerfil'>

    <RadioButton
        label="Male"
        value={gender === 'Male'}
        onChange={handleCatChange}
      />
      <RadioButton
        label="Female"
        value={gender === 'Female'}
        onChange={handleDogChange}
      />
        
        </div>
  )
}

const RadioButton = ({ label, value, onChange }) => {
    return (
      <label>
        <input type="radio" checked={value} onChange={onChange} />
        {label}
      </label>
    );
  };
  
  
export default BotonCambioPerfil

How I want the component to look

Answer 1

this example takes a state of gender (default to girl), and sets a const that checks if gender is equal to girl it will return the pink component else it will return a blue component. The onclick function changes the state to the gender its not. (girl or boy)

import React, { useState } from 'react'

export default function App() {

  const [ gender , setGender ] = useState("girl")

  const changeGender = () => {
    if(gender === "girl") {
      setGender("boy")
    } else setGender("girl")
  }

  const genderBtn = gender === "girl" ?
  <h2 onClick={changeGender} style={{
    backgroundColor: "pink",
    width: "100px",
    padding: "2px",
    borderRadius: "100px",
    cursor: "pointer",
  }}>{gender}</h2>
  :
  <h2 onClick={changeGender} style={{
    backgroundColor: "lightblue",
    width: "100px",
    padding: "2px",
    borderRadius: "100px",
    cursor: "pointer",
  }}>{gender}</h2>

  return (
    <div className="App">
      <h1>Gender Switch</h1>
      {genderBtn}
    </div>
  );
}