React Grommet Select - передача данных объекта в качестве параметров

Question

Я использую компоненты Grommet v2 и пытаюсь отразить отображение, использованное в примере «Выбор сезонов» в сборнике рассказов Grommet.

Поле выглядит так:

The difference is my data needs to separate label and value:

const Options = [
   {
     label: "S01",
     value: "283736"
   },
   {
     label: "S02",
     value: "293774"
   },

instead of using the default:

const Options = [
  "S01",
  "S02",

Here is an example on Codesandbox

Формат объекта был использован в примере ObjectMultiSelect Громмета в их storybook . Я нашел потребности в компоненте Select labelKey="label" и valueKey="value" для загрузки объектов в качестве параметров, но добавление этих двух объектов, кажется, нарушает параметры компонента.

Я бы хотел, чтобы передаваемые данные напоминали

const Options = [
   {
     label: "S01",
     value: "283736"
   },
   {
     label: "S02",
     value: "293774"
   },

и по-прежнему имеют параметры, показанные выше.

Answer 1

            <Select
              options={[
                {
                  lab: "S01",
                  val: "283736"
                },
                {
                  lab: "S02",
                  value: "293774"
                }
              ]}
              labelKey="lab"
              dropHeight="large"
              name="primaryServer"
              value={this.props.values.primaryServer}
              placeholder="Select Primary Server"
              emptySearchMessage={"No Servers Available"}
              onChange={({ option }) => {
                console.log(option.lab)
                console.log(option.val)
              }}
            />
            // Output // S01 // 283736
            // This worked for me. labelKey="lab" is required.