React Selecting dropdown option multiple times

Question

I am wanting to be able to select a language I have called "Skip" more than one time without it disappearing from the dropdown. Currently, any language I select will disappear from the dropdown. Is this possible? Here's my code:

const languages = [
    { key: 'skip', text: 'Skip', value: 'Skip' },
    { key: 'english', text: 'English', value: 'English' },
    { key: 'french', text: 'French', value: 'French' },
]

handleAudioInputChange = (e, { name, value }) => this.setState( {  [name]: value })

<Form.Select fluid search label='Audio Channels' name='audiochannelsValue' value={audiochannelsValue} options={languages}  placeholder='Choose Audio Channels' onChange={this.handleAudioInputChange} multiple = "true"/>

I've tried multiple things such as hideSelectedOptions = {false}, but this does not seem to work. Any ideas?

Can you elaborate on your problem? I don't understand the use-case you have nor what you mean by saying that it disappears from the dropdown. — Chris
– Chris, Commented Jan 23, 2019 at 21:10
@Chris I am wanting to make it so the user can select options English/Skip/French/Skip (in other words, they can select Skip multiple times) — lakeIn231
– lakeIn231, Commented Jan 23, 2019 at 21:14
And what happens when they select the Skip option twice? Do you want to have a counter counting the times pressed? Explain the desired implementation too. — Chris
– Chris, Commented Jan 23, 2019 at 21:20
Can you give me the desired new state after the user has selected English/Skip/French/Skip? — Chris
– Chris, Commented Jan 23, 2019 at 21:21
I am going to do a database insert that would look something like this English/Skip/French/Skip (in other words, itll just take all of the dropdown selected items and turn it into a string — lakeIn231
– lakeIn231, Commented Jan 23, 2019 at 21:21

Chris · Accepted Answer · 2019-01-24 00:11:43Z

1

If you only want a string based on the user input, you could do:

handleAudioInputChange = (e, { value }) => {
  this.setState(prevState => {
    const newVal = `${prevState.audiochannelsValue.length ? '/' : ''}${value}`;
    return {
      textValue: prevState.textValue.concat(newVal),
      audiochannelsValue: value
    };
  });
}

This will build a string based on the previous state and separate each value with /. Haven't tested it, but it should generate (in order):

English
English/Skip
English/Skip/French
English/Skip/French/Skip

edited Jan 24, 2019 at 0:11

answered Jan 23, 2019 at 21:41

Chris

59.7k20 gold badges121 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lakeIn231 Over a year ago

This displays nothing in the dropdown menu. Any idea how to keep the current view of the dropdown menu?

Chris Over a year ago

@Jay266 Oh sorry, forgot that one. Try my modified example above

Collectives™ on Stack Overflow

React Selecting dropdown option multiple times

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related