I have created a React based SPFX project and will show you how to bind a dropdown control to code, in this scenario I am filling the data from choice column values from a SharePoint list.

You need to import Dropdown and IDropdownOption from office-ui-fabric-react in the .tsx file of your spfx web part which is also know a functional logic file. Use below snippet.

import {
  Dropdown, IDropdownOption,
} from 'office-ui-fabric-react';

You can also bind dropdown control to retrieve data from multiple lists or can also multiple dropdown controls for creating a cascading logic. I have created a StatusDropdownOption array object using IDropdownOption interface.

Retrieve values form Column Field

Below is a small code logic which I have written to retrieve data from choice field. I am using the Issue Tracker list’s Status column and for binding the dropdown control

private StatusDropdownOption: IDropdownOption[] = [];

constructor(props:IDemoProps,state: IState)
    this.BindDropdown = this.BindDropdown.bind(this);
    this.onStatusChanged = this.onStatusChanged.bind(this);
    this.state ={      

  public async GetChoiceFieldOptions( listId: string, fieldInternalName: string ): Promise<{ key: string, text: string }[]> {
    let fieldOptions: { key: string, text: string }[] = [];
    try {   
       const results = await sp.web.lists.getById(listId)
        .select("Title", "InternalName", "Choices")
      if (results && results.Choices.length > 0) {
        for (const option of results.Choices) {
            key: option,
            text: option
    } catch (error) {
      return Promise.reject(error);
    return fieldOptions;

  private async BindDropdown() {      
   this.StatusDropdownOption = await this.GetChoiceFieldOptions( this.props.listId, "Status");
public async  componentDidMount(){
    await this.BindDropdown();     

I have used a function BindDropdown because if I need to add more dropdown controls, I can use the same function. I also have used constructor of the class to the function/event bindings.

Binding the Dropdown control       

Below is the syntax for binding the dropdown control:

                placeholder={'Select Status'} 
                onChange={this.onStatusChanged} />

Adnan, a distinguished professional, boasts an impressive track record as a Microsoft MVP, having achieved this prestigious recognition for the eighth consecutive year since 2015. With an extensive career spanning over 18 years, Adnan has honed his expertise in various domains, notably excelling in SharePoint, Microsoft 365, Microsoft Teams, the .Net Platform, and Microsoft BI. Presently, he holds the esteemed position of Senior Microsoft Consultant at Olive + Goose. Notably, Adnan served as the MCT Regional Lead for the Pakistan Chapter from 2012 to 2017, showcasing his leadership and commitment to fostering growth within the tech community. His journey in the realm of SharePoint spans 14 years, during which he has undertaken diverse projects involving both intranet and internet solutions for both private and government sectors. His impact has transcended geographical boundaries, leaving a mark on projects in the United States and the Gulf region, often collaborating with Fortune 500 companies. Beyond his roles, Adnan is a dedicated educator, sharing his insights and knowledge as a trainer. He also passionately advocates for technology, frequently engaging with the community through speaking engagements in various forums. His multifaceted contributions exemplify his dedication to the tech field and his role in driving its evolution.

Leave a Reply