Handle Radio Button and Dropdown
Radio Button
Create Radio Buttons
<h4>Select Gender</h4>
<input type="radio" name="gender" id="male" />
<label htmlFor="male">Male</label>
<input type="radio" name="gender" id="female" />
<label htmlFor="female">Female</label>
name="gender"
is same in both inputs, so only one can be selected.-
htmlFor="male"
connects label to input. Clicking label selects the button.
Add State
const [gender, setGender] = useState("female");
This line stores selected gender in state.
Default value is "female"
.
Add onChange
and checked
<input
type="radio"
name="gender"
id="male"
value="male"
onChange={(e) => setGender(e.target.value)}
checked={gender === "male"}
/>
<label htmlFor="male">Male</label>
<input
type="radio"
name="gender"
id="female"
value="female"
onChange={(e) => setGender(e.target.value)}
checked={gender === "female"}
/>
<label htmlFor="female">Female</label>
onChange
updates gender in state.
checked={gender === "male"}
means if state is "male", then button is selected.
Dropdown
Create Dropdown
<h2>Select City</h2>
<select
defaultValue="delhi"
onChange={(e) => setCity(e.target.value)}
>
<option value="noida">Noida</option>
<option value="gurgaon">Gurgaon</option>
<option value="delhi">Delhi</option>
</select>
defaultValue="delhi"
selects Delhi by default.
onChange
stores selected city in state.
State for Dropdown
const [city, setCity] = useState("delhi");
This line stores selected city.
Display Output
<h1>Selected Gender: {gender}</h1>
<h1>Selected City: {city}</h1>