Cascading List and ListItem using PnP Controls in the SharePoint Framework (SPFx) webpart

This article demonstrates how to implement a Cascading List and ListItem feature in SharePoint Framework (SPFx) using PnP Reusable Controls.
It allows users to first select a list and then pick items dynamically from that list — a powerful pattern for building dynamic, data-driven SharePoint web parts.

📦 Install dependencies

Install the PnP React Controls library:

npm install @pnp/spfx-controls-react --save --save-exact

🧩 Configure the component

Open your web part component file and create an interface for state:

export interface ISpfxPnpListListitemPickerState {
  SeletedList: string;
}

Then, update your render method to include both ListPicker and ListItemPicker controls:

public render(): React.ReactElement<ISpfxPnpListListitemPickerState> {
  return (
    <div className={styles.spfxPnpListListitemPicker}>
      <ListPicker context={this.props.context}
        label="Select your list"
        placeHolder="Select your list"
        baseTemplate={100}
        includeHidden={false}
        multiSelect={false}
        onSelectionChanged={this.onListPickerChange} />
      <br></br>
      <label>Search List Item</label>
      <ListItemPicker listId={this.state.SeletedList}
        columnInternalName='Title'
        keyColumnInternalName='Id'
        itemLimit={1}
        onSelectedItem={this.onSelectedItem}
        context={this.props.context} />
    </div>
  );
}

⚙️ Event Handlers

Add the following event handlers to handle user selections dynamically:

@autobind
private onListPickerChange(selectedList: string) {
  this.setState({ SeletedList: selectedList });
}

private onSelectedItem(selectedItems: any[]) {
  for (const item of selectedItems) {
    console.log("Selected Item ID:", item.key);
    console.log("Selected Item Title:", item.name);
  }
}

This ensures that when a list is selected, its ID is stored in the component state, and the related items become available in the ListItemPicker.

🚀 Deploy the solution

Once the component works locally, build and package the solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the generated .sppkg file to your App Catalog and deploy the solution.

After deployment, you can add the web part to any modern SharePoint page.
You’ll see the cascading dropdowns — one for selecting the list and another for selecting items within that list.

🧠 Summary

You’ve successfully implemented a Cascading List and ListItem Picker in SPFx using PnP Reusable Controls.
This approach simplifies list data access and enables dynamic user interactions within SharePoint pages.

📂 GitHub Source