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