Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

172
Views
Default multiple labels with semantic UI react drop down

I am using the semantic react dropdown and I am trying to get it so the options are already in the drop down as multiple labels but I cant seem to add them as default values then I want to be able to add more which I think I can already do with this example but I am having problems with mainly have multiple default multiple label is there any one that can help

import React, { Component } from 'react'
import { Dropdown } from 'semantic-ui-react'

const options = [
  { key: 'English', text: 'English', value: 'English' },
  { key: 'French', text: 'French', value: 'French' },
  { key: 'Spanish', text: 'Spanish', value: 'Spanish' },
  { key: 'German', text: 'German', value: 'German' },
  { key: 'Chinese', text: 'Chinese', value: 'Chinese' },
]

class DropdownExampleAllowAdditions extends Component {
  state = { options }

  handleAddition = (e, { value }) => {
    console.log('assinf')
    this.setState((prevState) => ({
      options: [{ text: value, value }, ...prevState.options],
    }))
  }


  handleChange = (e, { value }) =>{ console.log(value) 
    return this.setState({ currentValues: value })}

  render() {
    const { currentValues } = this.state

    return (
      <Dropdown
        options={this.state.options}
        placeholder='Choose Languages'
        search={(props)=>(props)}
        defaultSelectedLabel={ options}
        selection
        fluid
        multiple
        allowAdditions
        value={currentValues}
        onAddItem={this.handleAddition}
        onChange={this.handleChange}
      />
    )
  }
}

export default DropdownExampleAllowAdditions

I keep on getting this value when I try to add anything to the default label

Warning: Failed prop type: Invalid prop `defaultSelectedLabel` supplied to `Dropdown`, expected one of type [number, string].
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

In order for you to have this working your defaultSelectedLabel should be of type either number or string. So, first of all, you should not send array there. Secondly, I believe that for what you want defaultValue props is made. It's definition in documentation is declared as: "Initial value or value array if multiple.". If you check my codesendbox, you'll see it working there.

defaultValue={["English", "French"]} // is what I did
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!