semantic ui react Setting dropdown value to state

handleChange = (e, { value }) => this.setState({ value })

Add value prop to Dropdown

      render(          const { value } = this.state;        return(         <Dropdown          placeholder='Select Subject'         name="subject"         onChange={this.handleChange}         selection          options={subjects}          value={value}         />)       )

If anyone is using react hooks and semantic ui react, this is how I got it to work, without having to create a separate change handler function for it.

const options = [    { key: "1", text: "Speaker", value: "SPEAKER" },    { key: "2", text: "Event Planner", value: "EVENT_PLANNER" }  ];const [values, setValues] = useState({    firstName: "",    userType: ""  });const onChange = (event, result) => {    const { name, value } = result || event.target;    setValues({ ...values, [name]: value });  };<Form.Dropdown  placeholder="I am a.."  name="userType"  label="User Type"  selection  onChange={onChange}  options={options}  value={values.userType}  />

What kept throwing me off was the 'result' that the onChange function takes as an argument. Since the options are stored as objects in an array, the correct way to access their values is with the 'result' and not 'event.target.'

One more way to use DropDown in React Semantic. it worked perfectly for me.

const options = [    { key: 'ex1', text: 'Example 1', value: 'Example 1' },    { key: 'ex2', text: 'Example 2', value: 'Example 2' },]

Method to set value

handleSelectChange=(e,{value})=>this.setState({stateValue:value})

In Form

<Form.Select fluid label='List Example' options={options}placeholder='List Example' value={value} onChange={this.handleSelectChange} />