В раскрывающемся списке Semantic UI React значение onChange не устанавливается: React + Typescript

Question

Я использую раскрывающийся список semantic-ui-реакции и не могу установить значение этого раскрывающегося списка при изменении события.

Помощь будет принята

//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}
/>

Answer 1

РЕДАКТИРОВАТЬ: вам нужно добавить ключ value в массив данных.

Посмотрите, как они генерируют данные в своем примере:

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

СТАРЫЙ ОТВЕТ: Нет такого свойства как data.name в обработчике onChange ( он печатает неопределенное в этом коде andbox )

Полагаю, вы должны заполнить location ключом состояния:

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

Answer 2

Вы можете попробовать вот так.

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