CODEWITHSUNDEEP
reactjs
lakeIn231
lakeIn231

Reputation: 1295

React Selecting dropdown option multiple times

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?

Upvotes: 1

Views: 1016

Answers (1)

Chris
Chris

Reputation: 59491

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

Upvotes: 1

Related Questions