How to Implement Multi Select Dropdown in React

Question

I'm looking for a good way to create multi select dropdowns in plain React, without using an additional library.

At present, I’m doing something like this:

<select className='yearlymeeting' multiple={true}>
    <option value=''>Yearly Meeting</option>
    {
        this.state.meeting.yearly_meeting.map((m: Meeting, i: number) => {
            return (
                <option
                    value={m.title}
                    key={i}
                    selected={this.state.selectedTitles.yearlyMeetingTitles.includes(m.title) ? true : false}>
                    {m.title}
                </option>
             );
         })
     }
</select>

This code "works", but I'm getting this warning:

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

ok...so what part of that error message isn't clear? And what is your specific question? Did you try doing what the message suggests? Or look in the react docs for <select>? — charlietfl
– charlietfl, Commented Feb 2, 2019 at 21:02

Egor Nikitin · Accepted Answer · 2019-02-02 21:34:14Z

3

From react docs -

You can pass an array into the value attribute, allowing you to select multiple options in a select tag:

<select multiple={true} value={['B', 'C']}>

I think you just need to pass your selected items array to value prop of select element.

edited Feb 2, 2019 at 21:34

answered Feb 2, 2019 at 21:29

Egor Nikitin

415 bronze badges

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

1 Comment

Micah Bales Over a year ago

Brilliant, thanks! I didn't realize you could pass in an array here. Makes total sense. By the way, here's a link to the documentation: reactjs.org/docs/forms.html

MMH · Accepted Answer · 2019-02-02 21:30:08Z

2

Instead of checking conditions and setting "selected" props in the "option" element, directly set the value in the "select" element. The warning should go away.

<select className='yearlymeeting' multiple={true} 
value={this.state.selectedTitles.yearlyMeetingTitles}>
<option value=''>Yearly Meeting</option>
{
    this.state.meeting.yearly_meeting.map((m: Meeting, i: number) => {
        return (
            <option
                value={m.title}
                key={i}
                {m.title}
            </option>
         );
     })
 }
</select>

answered Feb 2, 2019 at 21:30

MMH

8966 silver badges21 bronze badges

1 Comment

Micah Bales Over a year ago

Yes, you're correct. Thank you! My blockage here was that it didn't occur to me that I could pass in an array for value

Collectives™ on Stack Overflow

How to Implement Multi Select Dropdown in React

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related