Quiero hacer un componente, donde hay dos opciones, y cuando seleccionas una, el color de los botones cambia, actualmente, estoy intentando con Entradas de tipo: radio, pero me gustaría saber si hay alguna. otra forma de hacerlo con reaccionar.
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 BotonCambioPerfileste ejemplo toma un estado de género (predeterminado para niña) y establece una const que verifica si el género es igual a niña, devolverá el componente rosa, de lo contrario devolverá un componente azul. La función onclick cambia el estado al género que no es. (chica o chico)
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> ); }