Selected value from semantic ui react dropdown not appearing when selected

Question

I can't get the selected value from the dropdown to render inside the dropdown once it's selected. The right value is being set (seen via console) but isn't displayed inside the actual dropdown

    const onSlotIdChange = (e, data) => {
      console.log(props);
      console.log("slotId fired, value ---> ", data.value);
      props.setFieldValue("slotId", data.value);
    };

The actual component is here

  <Dropdown
    id="slotId"
    value={slotId}
    onChange={onSlotIdChange}
    options={slotIds.map(id => {
      return {
        key: id.id,
        text: id.id,
        value: id.id
      };
    })}
  />

I've had an issue exactly like this and the solution before was to use something like props.setFieldValue("slotId", e.currentTarget.textContent); but i've tried this and it isn't working in this case. The <Dropdown> component is from Semantic ui react

I have a codesandbox here. Once you get to the splash page go to the Login page via the button at the top. Select Slot Sec officer from the radio group it will render 3 dropdowns, the 2nd and 3rd dropdowns (slotId and deviceId) are where I'm having the issue. If you pull up the console and make a selection the value is getting set correctly but the value doesn't appear in the dropdown once it's selected.

The code for the dropdowns are in getSlotIds and getDeviceIds classes. and the onChange methods are inside FormikLoginForm class

ofri cofri · Accepted Answer · 2019-06-30 05:43:17Z

1

It's because you're not setting the state after the user select the value, like you did in "Slot Security Officer Role" (this is correct, see line 246 in your codesandbox).
For example, to fix "device id" dropdown, after line 258, I put this code in line 259:

this.setState({deviceId: data.value});

and it works. The same need to be done for slotId, after line 253:

this.setState({slotId: data.value});

answered Jun 30, 2019 at 5:43

ofri cofri

1,07612 silver badges17 bronze badges

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

2 Comments

DJ2 Over a year ago

I can't believe I missed this. Thank you.

ofri cofri Over a year ago

I'm glad it helped.

Collectives™ on Stack Overflow

Selected value from semantic ui react dropdown not appearing when selected

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related