CODEWITHSUNDEEP
javascriptreactjssemantic-uisemantic-ui-react
Je Stra
Je Stra

Reputation: 117

How to get the values from a Multiple Search Selection dropdown box in react-semantic-ui?

I apologize if this is a silly question but I can't figure out how to get the values from a Multiple Search Selection dropdown boxes using semantic-ui-React component. I already have it render the proper items within it and selecting and searching works fine, but I can't seem to figure out how to get the values out of what the user has selected.

https://react.semantic-ui.com/modules/dropdown/#types-multiple-selection

thanks

EDIT:

code: 

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

const wbcOptions = [
    {
        key:1,
        text: 'Normal',
        value: 'Normal'
    },
    {
        key:2,
        text: 'PLT Clumping',
        value: 'PLT Clumping
    },
    {
        key:3,
        text: 'Reactive Lymphocytes',
        value: 'Reactive Lymphocytes'
    },
    {
        key:4,
        text: 'Hypersegmented Neutrophils',
        value: 'Hypersegmented Neutrophils'
    }
]


const DropdownWBC = (props) => (
  <Dropdown
    placeholder='WBC Abnormalities'
    fluid
    multiple
    search
    selection
    options={wbcOptions}
    onChange={props.handleSelectChange} //Is this where I would pass onChange method??
  />
)

export default DropdownWBC

So Ive created a function in my App.js file called 'handleSelectChange' and passed it as props to this (DropdownWBC) component. How would I get the values from the multiple select dropbox sementic-react component and pass it off to my App.js component so I can setState with its values?

Upvotes: 4

Views: 3312

Answers (1)

Rinkesh Golwala
Rinkesh Golwala

Reputation: 1039

I think this is what you are trying to do. Please check the code below.

// By using this "onchange" handler you can access the values selected by the user.
const handleChange = (e, {value}) => {
  console.log(value)
}

const DropdownExampleMultipleSelection = () => (
  <Dropdown placeholder='Skills' onChange={handleChange.bind(this)} fluid multiple 
    selection options={options} />
)

Upvotes: 2

Related Questions