How to get value of key of office-ui-fabric-react/lib/Dropdown in React

Question

I have created the dropdown in my react app using office-ui-fabric-react/lib/Dropdown

const fundsTypes: IDropdownOption[] =
    [
        { key: "Electronic", text: "Electronic" },
        { key: "BankCheque", text: "Bank Cheque" },
        { key: "TrustCheque", text: "Trust Cheque" },
        { key: "PersonalCheque", text: "Personal Cheque" }
    ];

<div className="ms-Grid-col ms-sm4">
  <Dropdown
     placeholder='Select Funds Type'
     data-cy='funds_type_input'
     options={fundsTypes}
     defaultSelectedKey={updatedState['fundType']}
     onChange={(ev, newItem) => this.props.updateValue(newItem!.key, 'fundType')}/>
  </div>

I'm storing the key in DB and now I want to get value based on the key somewhere on the page but I'm unable to do it. I searched a lot on the internet but didn't get a solution.

Now what I want finally is, to get the value of a key. For example, if I pass the key " PersonalCheque " then the value should be Personal Cheque . I tried fundsTypes["PersonalCheque"] but not working.

Can anyone help?

Answer 1

In documentation https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown I see selectedKeys prop

When you add it, you must store the selected key in state or somewhere.

 <Dropdown
     placeholder='Select Funds Type'
     data-cy='funds_type_input'
     options={fundsTypes}
     defaultSelectedKey={updatedState['fundType']}
     onChange={(ev, newItem) => this.props.updateValue(newItem!.key, 'fundType')}
     selectedKeys={["PersonalCheque"]} // here will be value from your state
/>