SPFx React - Dropdown (PropertyPaneDropdown & DropDownLists) options with list titles

 SPFx React - Dropdown (PropertyPaneDropdown & DropDownLists) options with list titles:

-------------------**.tsx File**----------------------

import * as React from 'react';

import styles from './DropDownLists.module.scss';

import { IDropDownListsProps } from './IDropDownListsProps';

import { escape } from '@microsoft/sp-lodash-subset';

import { IDropDownListsState } from './IDropDownListsState';

import { spOperations } from '../../SPOperations/spOperations';

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

 

export default class DropDownLists extends React.Component<IDropDownListsProps,IDropDownListsState, {}> {

  public _spOps = new spOperations();

  constructor(props:IDropDownListsProps){

    super(props);

    this._spOps = new spOperations();

    this.state = {listTitles:[]}

  }

componentDidMount(): void {

    this._spOps.GetSPListTitles_IDropDown().then(result=>{

      this.setState({listTitles:result});

    })

}

  public render(): React.ReactElement<IDropDownListsProps> {

    return (

      <div className={ styles.dropDownLists }>

        <div className={ styles.container }>

          <div className={ styles.row }>

            <div className={ styles.column }>

              <span className={ styles.title }>Hello RK!.. Welcome to SharePoint!</span>

              <Dropdown options={this.state.listTitles}> </Dropdown>

            </div>

          </div>

        </div>

      </div>

    );

  }

}

 ----------------* WebParts.ts *----------------------------------------

import * as React from 'react';

import * as ReactDom from 'react-dom';

import { Version } from '@microsoft/sp-core-library';

import {

  IPropertyPaneConfiguration,

  PropertyPaneTextField,

  PropertyPaneDropdown,

  IPropertyPaneDropdownOption,

} from '@microsoft/sp-property-pane';

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import * as strings from 'DropDownListsWebPartStrings';

import DropDownLists from './components/DropDownLists';

import { IDropDownListsProps } from './components/IDropDownListsProps';

import { sp } from '@pnp/sp/presets/all';

export interface IDropDownListsWebPartProps {

  description: string;

}

export default class DropDownListsWebPart extends BaseClientSideWebPart<IDropDownListsWebPartProps> {

  protected async onInit(): Promise<void> {

    const _ = await super.onInit();

    sp.setup({ spfxContext: this.context });

  }

 

  public _listTitleOptions: IPropertyPaneDropdownOption[];

  public render(): void {

    const element: React.ReactElement<IDropDownListsProps> = React.createElement(

      DropDownLists,

      {

        description: this.properties.description

      }

    );

    ReactDom.render(element, this.domElement);

  }

  // Declare - PropertyPane

  private _dropdownOptions: IPropertyPaneDropdownOption[];

  private listsDropdownDisabled: boolean = true;  

  protected onPropertyPaneConfigurationStart(): Promise<IPropertyPaneDropdownOption[]> {

    let options: IPropertyPaneDropdownOption[] = [];

    return new Promise<IPropertyPaneDropdownOption[]>(async(resolve, reject) => {

      this.listsDropdownDisabled = !this._dropdownOptions;

      if (this._dropdownOptions) {

        return;

      }

      this.context.statusRenderer.displayLoadingIndicator(this.domElement, '_dropdownOptions');

      sp.web.lists.select('Title')().then((results: any) => {

        results.map(result => {

          options.push({ key: result.Title, text: result.Title });

          resolve(options);

          console.log(options);

        }, (error: any) => { reject('--> Error occured' + error) });

      });

      this._dropdownOptions = options

      this.listsDropdownDisabled = false;

      this.context.propertyPane.refresh();

      this.context.statusRenderer.clearLoadingIndicator(this.domElement);

      this.render();

    });

  }  

  protected onDispose(): void {

    ReactDom.unmountComponentAtNode(this.domElement);

  }

  protected get dataVersion(): Version {

    return Version.parse('1.0');

  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

    return {

      pages: [

        {

          header: {

            description: strings.PropertyPaneDescription

          },

          groups: [

            {

              groupName: strings.BasicGroupName,

              groupFields: [

                PropertyPaneTextField('description', {

                  label: strings.DescriptionFieldLabel

                }),

                PropertyPaneDropdown('dropdownLists', {

                  label: "Lists",

                  options: this._dropdownOptions,

                  disabled: this.listsDropdownDisabled

                })

              ]

            }

          ]

        }

      ]

    };

  }

}

 ------------------------* SPOperations/spOperations*----------------------------------------

import { IPropertyPaneDropdownOption } from "@microsoft/sp-property-pane";

import { sp } from "@pnp/sp/presets/all";

import { IDropdownOption } from "office-ui-fabric-react";

export class spOperations {

    public GetSPListTitles_IDropDown(): Promise<IDropdownOption[]> {

        let lstTitle: IDropdownOption[] = [];

        return new Promise<IDropdownOption[]>(async (resolve, reject) => {

            sp.web.lists.select('Title')().then((results: any) => {

                results.map(result => {

                    lstTitle.push({ key: result.Title, text: result.Title });

                    resolve(lstTitle);

                }, (error: any) => { reject('Error Occured in GetLists IDropDown Options' + error) });

            })

        })

    }

 ----------------------------------------------------* state *----------------------------------------------

import { IDropdownOption } from "office-ui-fabric-react";

export interface IDropDownListsState {

  //description: string;

  listTitles:IDropdownOption[];

}

-------------------------------------------