Dropdown onchange doesnt work : React+ Typescript+ semantic-ui-react

Question

I am trying to bring up a dropdown using semantic-ui-react with typescript. The problem here I am facing is , I am unable to attach change handlers to it. It is throwing the following error " Type 'SyntheticEvent' is not assignable to type 'ChangeEvent' ".

//Importing Dropdown
import Dropdown from 'semantic-ui-react/dist/commonjs/modules/Dropdown';

//options array
const options = [
  { key: 1, text: 'Location 1', value: 1 },
  { key: 2, text: 'Location 2', value: 2 },
  { key: 3, text: 'Location 3', value: 3 },
]

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

//Dropwdown change event
dropdownChange = (event: React.ChangeEvent<HTMLSelectElement> ,{value}) =>{
   this.setState({ value });
}

//Rendering Drop down
render()
{
  return(
      <Dropdown  
        options={opitons}
        name="value"  
        value={this.state.value}
        onChange={this.dropdownChange}
      />
  )
}

ramirozap · Accepted Answer · 2019-05-21 12:26:06Z

5

This is happening because the library is not using a ChangeEvent is using a SyntheticEvent

The typings for the onChange function on the Dropdown element are:

onChange?: (event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => void

You can see them here https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.d.ts#L143

so you should change this line:

dropdownChange = (event: React.ChangeEvent<HTMLSelectElement> ,{value}) =>{

to:

dropdownChange = (event: React.SyntheticEvent<HTMLElement> ,{value}) =>{

answered May 21, 2019 at 12:26

ramirozap

1,45915 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Dropdown onchange doesnt work : React+ Typescript+ semantic-ui-react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related