Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select only allows array of options #174

Closed
sp4cecat opened this issue Aug 23, 2017 · 6 comments
Closed

Select only allows array of options #174

sp4cecat opened this issue Aug 23, 2017 · 6 comments

Comments

@sp4cecat
Copy link

Issue summary

There appears to be no way to use key/value pairs as options, only a list is allowed. Expected behavior options should allow a list of objects, with each list item containing an 'id' and 'label' or perhaps a key/value relationship representing the options. Actual behavior Throws an error if object is provided instead of array Steps to Reproduce the Problem Insert a select with options as say: { "QLD": "Queensland, "NSW": "New South Wales", .. } Specifications Polaris version: 1.3.1 React version: 15.6.1 Browser:Any Device:Any Operating System:Any

@bakura10
Copy link

Hi,

You can do that by giving an array of hash this way:

<Select
            label="Choose value"
            value={this.state.value}
            options={[
               {label: 'Foo', value: 'foo'},
               {label: 'Bar', value: 'bar'}
            ]}
          />

@lemonmade
Copy link
Member

@sp4cecat @bakura10's way would be the recommended solution to this. Is there a reason you want to use an object instead of an array?

@sp4cecat
Copy link
Author

It's not immediately obvious how you specify value:label pairs - the example at https://polaris.shopify.com/components/forms/select#navigation only shows a flat array for options.

@sp4cecat
Copy link
Author

Ended up digging through the code to see the correct way; https://polaris.shopify.com/components is missing a bit of depth like that. The Select examples only show a flat array:

   options={[
    'two',
    'three',
  ]}

Is there another resource I can go to that's got a bit more detailed use info? To save me having to

@dfmcphee
Copy link
Contributor

We are actively working on making improvements to our docs. I will add an issue to make sure we add some better and more complex examples for the Select component.

@dfmcphee
Copy link
Contributor

Fixed in 1.6.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants