Построение выпадающего списка параметров выбора: объекты недопустимы как дочерний элемент React

Question

У меня есть следующий фрагмент кода React JSX, который отображает выпадающий список выбора из списка значений.

renderRoleDropdown(user_role) {
let values = ['a', 'b', 'c', 'd'];

return (
  <select onChange={() => /* some logic here */ }>
    {
      values.map((value, _i) => {
        let label = getDisplayLabelForValue(value);
        return <option key={value} value={value}>{label}</option>;
      })
    }
  </select>
 );
}

Насколько я могу судить, это соответствует тому, как работают другие примеры - просто цикл по списку и построение массива <option> элементов. Однако, когда я запускаю его, я получаю

Объекты недопустимы как дочерний элемент React (найдено: объект с ключами {опции}). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

Я не использую объект и явно возвращаю массив, поэтому мне интересно, почему это не нравится?

Спасибо!

Answer 1

У вас было много синтаксических ошибок (pascal имена, без символов) - теперь это работает. Вы также можете использовать значение вместо метки.

Я не могу отразить остальную часть кода - я не знаю его назначение.

---

import React, { useState, useEffect, Component } from 'react'

let RenderRoleDropdown = () => {

    let values = ['a', 'b', 'c', 'd'];

    return (
        <select>
            {
                values.map((value, _i) => {
                    let label = "random value"
                    return <option key={value} value={value}>{label}</option>;
                })
            }
        </select>
    );
}

export default RenderRoleDropdown;