86 lines
2.3 KiB
JavaScript
86 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import { useState } from 'react'
|
|
|
|
export default function RadioButton4() {
|
|
const [age, setAge] = useState();
|
|
|
|
// this function will be called when a radio button is checked
|
|
const handleChange = (e) => {
|
|
console.log('handleChange() e.target.value: ' + e.target.value);
|
|
setAge(e.target.value);
|
|
}
|
|
return (
|
|
<div style={{ padding: 50 }}>
|
|
<form>
|
|
<fieldset>
|
|
<legend>Select your age</legend>
|
|
|
|
<input
|
|
type="radio"
|
|
name="age"
|
|
id='age-range-1'
|
|
value="0-17"
|
|
onChange={handleChange}
|
|
checked={age === '0-17'} />
|
|
<label htmlFor="age-range-1">Under 18</label><br />
|
|
|
|
<input
|
|
type="radio"
|
|
name="age"
|
|
id='age-range-2'
|
|
value="18-24"
|
|
onChange={handleChange}
|
|
checked={age === '18-24'} />
|
|
<label htmlFor="age-range-2">18-24</label><br />
|
|
|
|
<input
|
|
type="radio"
|
|
name="age"
|
|
id='age-range-3'
|
|
value="25-34"
|
|
onChange={handleChange}
|
|
checked={age === '25-34'} />
|
|
<label htmlFor="age-range-3">25-34</label><br />
|
|
|
|
<input
|
|
type="radio"
|
|
name="age"
|
|
id='age-range-4'
|
|
value="35-44"
|
|
onChange={handleChange}
|
|
checked={age === '35-44'} />
|
|
<label htmlFor="age-range-4">35-44</label><br />
|
|
|
|
<input
|
|
type="radio"
|
|
name="age"
|
|
id='age-range-5'
|
|
value="45-54"
|
|
onChange={handleChange}
|
|
checked={age === '45-54'} />
|
|
<label htmlFor="age-range-5">45-54</label><br />
|
|
|
|
<input
|
|
type="radio"
|
|
name="age"
|
|
id='age-range-6'
|
|
value="55-64"
|
|
onChange={handleChange}
|
|
checked={age === '55-64'} />
|
|
<label htmlFor="age-range-6">55-64</label><br />
|
|
|
|
<input
|
|
type="radio"
|
|
name="age"
|
|
id='age-range-7'
|
|
value="65+"
|
|
onChange={handleChange}
|
|
checked={age === '65+'} />
|
|
<label htmlFor="age-range-7">65+</label><br />
|
|
</fieldset>
|
|
</form>
|
|
<h1>{age === undefined ? 'Please select your age' : `Your age: ${age}`}</h1>
|
|
</div>
|
|
);
|
|
};
|