Update multiple semantic ui react dropdown keys to state

Question

I'm using Semantic UI React to render some selection options in a dropdown .

I have a child component that is mapping over an array of object and returning some keys. So I supplied the following to the options prop for the semantic ui dropdown

      <Dropdown
        id="slotId"
        value={slotId}
        initialized={initialized}
        onChange={onSlotIdChange}
        selection
        fluid
        placeholder="Please select a slot id"
        clearable
        options={slots.map(slotId => {
          return {
            text: slotId.slotId,
            value: slotId.slotId,
            key: slotId.slotId,
            description: `Initialized: ${slotId.initialized}`,
            initialized: slotId.initialized
          };
        })}
      />

I'm lifting up state to the parent where I have the changeHandler defined

onSlotIdChange = async (e, { value, initialized }) => {
this.setState(
  { slotId: value, initialized: initialized, isLoading: false },
  () => {
    console.log(
      "chosen slotId updated to state, callback -->",
      this.state.slotId
    );
    console.log("initialized", this.state.initialized);
  }
);

if (!value) {
  this.handleClear();
  return;
}
};

I have a codesanbox here with the issue.

Basically when I make the selection of the slotId it updates the slotId value to state, but I also want to update the initialized value to state as well. So For example, in the codesanbox, If you choose slotId: 1 from the dropdown I also want a state variable initialized to update with the value of Y.

I'm struggling with getting the initialized key from the child to update with the selected Id in the parent. It's only being set to an empty "" instead of the initialized value of Y or N.

I think the way semantic handles event changes only the value key is recognized

Jee Mok · Accepted Answer · 2019-08-20 22:24:17Z

The reason was because on your Dropdown component's options, you value only includes the slotId:

          options={slots.map(slot => {
              return {
                key: slot.slotId,
                text: slot.slotId,
                value: slot.slotId, // <--- this value here
                description: `Initialized: ${slot.initialized}`,
                initialized: slot.initialized
              };
            })}

To receive more information, you can either update the value returned:

         <Dropdown
            id="slotId"
            value={slotId}
            initialized={initialized}
            onChange={onSlotIdChange}
            selection
            fluid
            placeholder="Please select a slot id"
            clearable
            options={slots.map(slot => {
              return {
                key: slot.slotId,
                text: slot.slotId,
                value: { slotId: slot.slotId, initialized: slot.initialized },
                description: `Initialized: ${slot.initialized}`,
                initialized: slot.initialized
              };
            })}
          />

or pass in the third argument on onChange callback:


          <Dropdown
            id="slotId"
            value={slotId}
            initialized={initialized}
            onChange={(e, d) => onSlotIdChange(e, d, slots.find(s => s.slotId === d.value).initialized)}
            selection
            fluid
            placeholder="Please select a slot id"
            clearable
            options={slots.map(slot => {
              return {
                key: slot.slotId,
                text: slot.slotId,
                value: slot.slotId,
                description: `Initialized: ${slot.initialized}`,
                initialized: slot.initialized
              };
            })}
          />

or update the data returned to include with the found initialized value similar to the second approach above. Whichever that suits you best!

Collectives™ on Stack Overflow

Update multiple semantic ui react dropdown keys to state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related