Атрибуты 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>;
}

Теперь, если мы изменим тексты оптионов, то работа скрипта не нарушится - ведь она привязана к значению атрибута value.

С помощью выпадающего списка предложите пользователю выбрать к какой возрастной группе он относится: от 0 до 12 лет, от 13 до 17, от 18 до 25, либо старше 25 лет.