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
– skyboyer, Commented Sep 4, 2018 at 19:26

Tania Rascia · Accepted Answer · 2018-09-04 16:59:37Z

0

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.

edited Sep 4, 2018 at 16:59

answered Sep 4, 2018 at 16:38

Tania Rascia

1,8632 gold badges19 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

Semantic UI React Form Select - set selected value

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related