Getting selection from Fluent UI dropdown in React project

Question

I am printing to the console a user selection from a Fluent UI dropdown. The only challenge I'm running into is grabbing the actual selection. I don't see how FLUENT is handling that, as it's not mentioned in their documentation.

My code looks like this:

<Dropdown
  placeholder="Select Reason"
  label="Send to History with Reason"
  onChange={(selectedKey) => this.onReasonChange(selectedKey)}
  options={this.graveyardReasons}
  onRenderLabel={this.onRenderLabel}
  styles={{
    root: {
      maxWidth: 300,
      minWidth: 300,
    },
  }}
/>

And here's the function that gets called on a selection being made:

onReasonChange = (selection) => {
  console.log('selection.target: ', selection.target);
};

This is what prints to the console:

<div data-is-focusable="true" id="Dropdown23" tabindex="0" role="listbox" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Dropdown23-label Dropdown23-option" class="ms-Dropdown dropdown-155"><span id="Dropdown23-option" class="ms-Dropdown-title title-220" aria-live="polite" aria-atomic="true" aria-invalid="false" role="option" aria-setsize="4" aria-posinset="2" aria-selected="true">Selection 1</span></div>

How do I pull the value Selection 1 from this div? And, is there a simpler way to get the value that I'm simply missing?

StepUp · Accepted Answer · 2022-08-03T15:23:42.630

As Fluent UI docs says about onChange:

(
    event: React.FormEvent<HTMLDivElement>, 
    option?: IDropdownOption, 
    index?: number
) => void

Callback issued when the selected option changes.

So selected value is the second parameter. Let me show an example:

const DropdownBasicExample: React.FunctionComponent = () => {
  const onReasonChange = (e, selection) => {
      console.log('selection: ', selection);
  };
  
  return (
    <Stack tokens={stackTokens}>
      <Dropdown
        placeholder="Select an option 1"
        label="Basic uncontrolled example"
        onChange={onReasonChange}
        options={options}
        styles={dropdownStyles}
      />      
    </Stack>
  );
};

Getting selection from Fluent UI dropdown in React project

1 Answers1