Read all lists/views/fields using pnpjs in spfx webpart

Recently I started exploring pnp js with spfx webparts. I wanted to explore few things which are more of basic functionality for any webparts. In this Post I'll explain How to read all the lists from a site and bind to dropdown in spfx webpart Read all the views for a selected list and bind to 2nd dropdown. Get all the fields/columns for a selected view and render then as checkboxes in spfx webpart. I have created a react spfx project and imported all the sp,web from @pnp/sp library. i mport { sp , Web , List } from '@pnp/sp' ; First step is to declare 3 collections for above 3 requirements so that you can use them in getPropertyPageConfiguration() method. private listDropDownOptions : IPropertyPaneDropdownOption []; private viewDropDownOptions : IPropertyPaneDropdownOption []; private fieldsListCollection = []; Use these collections in getPropertyPageConfiguration() method. protected getPropertyPaneConfiguration (): IPropertyPaneConfigu...