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
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>
);
}