Semantic UI React Form Select - set selected value

Question

In Semantic UI React, I can't figure out how to set the selected value of a dropdown (on an edit form, for example). Here's how the options come in:

const options = users.map(user => ({
  key: user.id,
  text: user.name,
  value: user,
}))

And the form looks like this. I've tried setting the defaultValue, value, etc, but nothing has worked for me yet.

<Form.Field>
  <Form.Select
    fluid
    selection
    label="Users"
    name="users"
    options={options}
    defaultValue={user}
    onChange={this.handleSelectChange}
  />
</Form.Field>

I would assume the defaultValue needs to be something like:

{ key: 1, text: 'Tania', value: tania }

But according to this post, the default value of a Dropdown (which is apparently the underlying code of Select "sugar") can't be an object.

actually `value` is also described as "{bool|string|number|arrayOf}". Is not it better to change code so `value` for each option would be `user.id`? — skyboyer, Sep 04 '18 at 19:26

Tania Rascia · Answer 1 · 2018-09-04T16:59:37.833

So, my solution was to do something like this:

const options = users.map(user => {
  if (user.name === selectedUser.name) {
    return {
      key: user.id,
      text: user.name,
      value: user,
      active: true,
      selected: true,
    }
  }
  return {
    key: user.id,
    text: user.name,
    value: user,
  }
})

I also set text={user.name} to the Select component and it works well enough now, though the first option still appears selected-but-not-active.

Semantic UI React Form Select - set selected value

1 Answers1