Semantic UI React dropdown does not set the value onChange: React+ Typescript

Question

I am implementing a semantic-ui-react dropdown and I am unable to set the value of this dropdown on change event.

Help would be appreciated

//options object
const options =  [
  {name: "val1" , label: "val1"},
  {name: "val2" , label: "val2"},
  {name: "val3" , label: "val3"}
]

this.state= {location: ''} //state object


//onchange event
dropdownChange = (event: React.SyntheticEvent<HTMLElement>, data:any) => {
    this.setState({[data.name]:data.value})
}

//select component
<Select options={options}
  name="location"  
  value={this.state.location}
  onChange={this.dropdownChange}
/>

Gaël S · Accepted Answer · 2019-05-29 09:29:03Z

2

EDIT: You need to add a value key to the array of data.

Look at how they generate data in their example :

const countryOptions = _.map(faker.definitions.address.country, country => ({
  key: country,
  text: country,
  value: country
}));

OLD ANSWER: There is no such propertie as data.name in the onChange handler (it prints undefined in this codesandbox)

I guess you should populate location key in the state :

dropdownChange = (event: React.SyntheticEvent<HTMLElement>, data:any) => {
    this.setState({location: data.value})
}

edited May 29, 2019 at 9:29

answered May 29, 2019 at 9:11

Gaël S

1,5598 silver badges15 bronze badges

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

2 Comments

joy08 Over a year ago

I am using this as a general handler , this.setState({[data.name]:data.value}) ; Also I am able to get the info related to this data object, but "value" field is not getting set

Gaël S Over a year ago

I missed the obvious: you need to add a value key in your array of data :)

Raja Jaganathan · Accepted Answer · 2019-05-29 09:19:55Z

0

You can try like this.

//onchange event
dropdownChange = (event: React.SyntheticEvent<HTMLElement>, data:any) => {
    this.setState({[event.target.name]:data.value})
}

answered May 29, 2019 at 9:19

Raja Jaganathan

36.7k4 gold badges34 silver badges37 bronze badges

1 Comment

joy08 Over a year ago

Able to get the name property, the problem is only with data.value

Collectives™ on Stack Overflow

Semantic UI React dropdown does not set the value onChange: React+ Typescript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related