# Атрибуты value селекта из массива в React

Пусть у нас опять пункты списка хранятся в массиве:

`function App() { const texts = ['text1', 'text2', 'text3', 'text4']; const [value, setValue] = useState(''); ... }`

Давайте сформируем с помощью этого массива теги `option`, добавив им в качестве атрибутов `value` значения элементов массива:

`function App() { const texts = ['text1', 'text2', 'text3', 'text4']; const [value, setValue] = useState(''); const options = texts.map((text, index) => { return <option key={index} value={index}>{text}</option>; }); ... }`

Используя сформированные теги создадим выпадающий список:

`return <div> <select value={value} onChange={event => setValue(event.target.value)}> {options} </select> </div>;`

Выведем в абзац номер выбранного пункта:

`return <div> <select value={value} onChange={event => setValue(event.target.value)}> {options} </select> <p> ваш выбор: {value} </p> </div>;`

А теперь выведем текст выбранного пункта, используя его номер и массив с текстами:

`return <div> <select value={value} onChange={event => setValue(event.target.value)}> {options} </select> <p> ваш выбор: {texts[value]} </p> </div>;`

Соберем все вместе и получим следующий код:

`function App() { const texts = ['text1', 'text2', 'text3', 'text4']; const [value, setValue] = useState(''); const options = texts.map((text, index) => { return <option key={index} value={index}>{text}</option>; }); return <div> <select value={value} onChange={event => setValue(event.target.value)}> {options} </select> <p> ваш выбор: {texts[value]} </p> </div>; }`
← →
↑