Semantic-ui-react: How To Use Two Unique "Multiple Selection" Dropdowns in the Same Form

[quadsurf]

It's seeming impossible to include two "Multiple Selection" Dropdowns in the same form, because each instance requires the attribute use of value={value} ... and if I rename it to something else in order to keep each dropdown's array unique, it breaks the code and says 'value' is required. If I don't rename it, the code works, but both dropdowns now write to the same array, which is not expected or desired. Does any one have a work around for this?

What I'd like to do is just save user-selected options to the "this.state.stations" array for the "stations" dropdown, and then separately save user-selected options to the "this.state.ages" array for the "ages" dropdown, without them being forced into the same "this.state.value" array. Please help!

Here's my code:

https://jsfiddle.net/quadsurf/hLvj55d3/

[levithomason]

The markdown in this issue is malformed. If you open up a codepen showing the issue I can see about helping. This is certainly possible. Sounds a bug in your project's code.

Fork this to get started: http://codepen.io/levithomason/pen/ZpBaJX

[quadsurf]

@levithomason I was just in the middle of doing that haha, cuz the github back ticks weren't wrapping my code right. Thanks for the help!

[levithomason]

No problem, I'll see what I can do to help.

[levithomason]

You'll need to fork the codepen I provided. It includes Babel compilation and the Semantic-UI-React library. The jsfiddle you provided is incapable of rendering the app.

[quadsurf]

@levithomason

no probs, thanks again:
http://codepen.io/quadsurf/pen/KNEQZg

[quadsurf]

@levithomason

I wasn't sure how to convert your codepen from a functional react component to a class-based component (required since state is needed), but this codepen comes a bit closer to what you might need to help:
http://codepen.io/quadsurf/pen/ENMQQQ

Also, all I did was copy and paste from the example given at:
https://github.com/Semantic-Org/Semantic-UI-React/blob/master/docs/app/Examples/modules/Dropdown/Usage/DropdownExampleRemote.js

If you take that code (it works very nice by the way), and then just modify it so that there are 2 instances of "Dropdown" like so:
Form.Dropdown
fluid
selection
multiple={multiple}
search={search}
options={options}
value={value}
placeholder='Add Users'
onChange={this.handleChange}
onSearchChange={this.handleSearchChange}
disabled={isFetching}
loading={isFetching}

Form.Dropdown
fluid
selection
multiple={multiple}
search={search}
options={options}
value={value}
placeholder='Add Users'
onChange={this.handleChange}
onSearchChange={this.handleSearchChange}
disabled={isFetching}
loading={isFetching}

How would you get those 2 Dropdown instances to not write to the same array on state?

[quadsurf]

Figured it out... es6 spread operator needed, as seen below:

<Form.Dropdown name="stations" placeholder='Select Topics...' value={stations} onChange={(e,{value}) => this.setState({stations:[...value]})} fluid multiple selection options={stationOptions} /> <Form.Dropdown name="ages" placeholder='Select Ages...' value={ages} onChange={(e,{value}) => this.setState({ages:[...value]})} fluid multiple selection options={ageOptions} />

[mbj36]

Hey @quadsurf thanks for the explanation, it also worked for me