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>


  1. name="gender" is same in both inputs, so only one can be selected.
  2. 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>