6

I am using Grommet v2 components and trying to mirror the display used in the Select 'Seasons' example in Grommet's storybook.

The field appears like this:

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

The object format was used in Grommet's example of ObjectMultiSelect in their storybook. I found the Select component needs labelKey="label" and valueKey="value" to load the objects as options, but adding these two props seems to break the component options.

I would like for the data passed in to resemble

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

and still have the options displayed as above.

Zach
  • 871
  • 1
  • 11
  • 21
Brantley English
  • 378
  • 1
  • 9

1 Answers1

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.
Rohit Bhambhani
  • 11
  • 1
  • 2
    While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Yannick Huber May 09 '19 at 00:50