Атрыбуты value у селекце ў React

Хай цяпер у нас у тэгах option ёсць атрыбуты value:

function App() {
	return <div>
		<select>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
	</div>;
}

У такім выпадку з-за наяўнасці атрыбутаў value у стэйт будуць трапляць менавіта іх значэнні, а не тэксты тэгаў option. Можна пераканацца ў гэтым, вывеўшы вынік выбару ў абзац:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={(event) => setValue(event.target.value)}>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
		<p>
			ваш выбар: {value}
		</p>
	</div>;
}

Падзяліць тэкст option і яго значэнне можа быць зручна: тэкст тэга мы можам мяняць як нам заўгодна, пры гэтым у нашым скрыпце вынік выбару будзе апрацоўвацца па значэнні атрыбута value, якія застанецца нязменным.

Глядзіце прыклад:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={event => setValue(event.target.value)}>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
		<p>
			{value === '1' && 'вы выбралі першы пункт'}
			{value === '2' && 'вы выбралі другі пункт'}
			{value === '3' && 'вы выбралі трэці пункт'}
		</p>
	</div>;
}

Цяпер, калі мы зменім тэксты тэгаў option, то праца скрыпта не парушыцца - бо яна прывязаная да значэння атрыбута value.

З дапамогай выпадаючага спісу прапануйце карыстальніку выбраць да якой узроставай групы ён адносіцца: ад 0 да 12 гадоў, ад 13 да 17, ад 18 да 25, альбо старэй за 25 гадоў.