Как мне отобразить выпадающий список, параметры в соответствии со значениями, установленными в useState? — Интерфейс React и Material

#javascript #reactjs #material-ui #use-state

#javascript #reactjs #материал-пользовательский интерфейс #use-state

Вопрос:

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

 const[drop,setDrop] = useState(["Virat Kohli","Selena Gomez","Deepika Padukone"]);
  

Теперь я хочу, чтобы мой выпадающий список имел следующие значения:

  1. Выберите
  2. Вират Кохли
  3. Селена Гомес
  4. Дипика Падуконе

Я использовал приведенный ниже код в функции возврата:

                    drop.map( d=> 
                            {
                                <MenuItem value={d} index="1">{d}</MenuItem>

                            })
  

Но ничего не отображается, также меня смущает индексная часть, она должна повторяться и увеличиваться.
Может кто-нибудь, пожалуйста, помочь?
Заранее спасибо 🙂

Комментарии:

1. Можете ли вы показать больше кода?

2. Ваша функция arrow не возвращает <MenuItem> . Добавьте return или удалите фигурные скобки: jsfiddle.net/fvd3wy9n

3. Попробуйте это: drop.map((drop) => (<MenuItem key={drop} value={drop}>{drop}</MenuItem>)) );

Ответ №1:

Попробуйте это.

 drop.map( d=> { 
 <MenuItem value=`${d}` index="1">{d}</MenuItem>
})