# Атрибуты 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` лет.

←→
↑