Here is a complete blog article in English, using your final code and covering all the key points from the official documentation.

Using the PnP SPFx ListPicker in SharePoint Framework (Dev. Guide)

https://your-tenant.sharepoint.com/sites/your-site/_layouts/15/workbench.aspx

https://your-tenant.sharepoint.com/sites/your-site/_layouts/15/workbench.aspx

In this article, we will walk through:

• What the ListPicker is
• How to configure it correctly
• Common mistakes (and how to fix them)
• Filtering strategies (very important)
• A working final example

Official reference:
ListPicker Documentation

What is the ListPicker control?

The ListPicker is a reusable React control that allows users to select one or multiple lists/libraries from the current SharePoint site. [pnp.github.io]

It automatically connects to SharePoint using the SPFx context and retrieves available lists based on filters you configure.

Install the dependency

Before using the control, install the PnP React controls library:

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

Import the control

import { ListPicker } from “@pnp/spfx-controls-react/lib/ListPicker”;

“

Final Working Code

Here is the final working version of your component:

import * as React from ‘react’;

import { ListPicker } from “@pnp/spfx-controls-react/lib/ListPicker”;

import { IListPickerWpProps } from ‘./IListPickerWpProps’;

const onListPickerChange = (lists: string[]): void => {

  console.log(“Lists:”, lists);

};

const ListPickerWp: React.FC<IListPickerWpProps> = (props) => {

  return (

    <ListPicker

      context={props.context}

      label=”Select your list(s)”

      placeHolder=”Select your list(s)”

      baseTemplate={undefined}

      contentTypeId={undefined}

      includeHidden={false}

      multiSelect={false}

      onSelectionChanged={onListPickerChange}

    />

  );

};

export default ListPickerWp;

Key Properties Explained

The ListPicker control exposes several important properties. [pnp.github.io]

1. context (Required)

context={props.context}

This is the SPFx context used to connect to SharePoint.
Without it, the control cannot retrieve lists.

2. baseTemplate

baseTemplate={100}

Filters lists by SharePoint Base Template ID.

Common values:

3. contentTypeId

contentTypeId=”0x0101″

“

Filters lists that contain a specific content type. [pnp.github.io]

Example:

• 0x0101 → Document content type

4. includeHidden

includeHidden={false}

Controls whether hidden lists are included.

5. multiSelect

multiSelect={false}

Defines whether users can select multiple lists. [pnp.github.io]

6. onSelectionChanged

onSelectionChanged={onListPickerChange}

Callback triggered when the user selects a list. [pnp.github.io]

Critical Mistake to Avoid

One of the most common issues is writing:

onSelectionChanged={() => { onListPickerChange }}

This does NOT execute the function.

Correct:

onSelectionChanged={onListPickerChange}

Why the ListPicker Returned Empty

If your ListPicker shows no items but no errors, there are two main reasons:

1. Running in Local Workbench

The local workbench (https://localhost:4321) does not connect to a real SharePoint site.

Result:

• The control renders
• No lists are returned

Solution: Use the SharePoint workbench:

https://your-tenant.sharepoint.com/sites/your-site/_layouts/15/workbench.aspx

2. Conflicting Filters

This configuration is incorrect:

baseTemplate={100}

contentTypeId=”0x0101″

Why?

• 100 = Custom List
• 0x0101 = Document (library)

No list matches both conditions.

Result:

• Empty dropdown

Correct Filtering Strategies

Show all lists

baseTemplate={undefined}

contentTypeId={undefined}

Only custom lists

baseTemplate={100}

Only document libraries

baseTemplate={101}

or

contentTypeId=”0x0101″

Advanced filtering

You can use contentTypeId to restrict lists containing specific content types. [pnp.github.io]

Bonus Tip: Getting Selected List

The callback returns the selected list ID(s):

const onListPickerChange = (lists: string[]): void => {

  console.log(lists);

};

You can use this ID to:

• Fetch list items via REST
• Use PnPjs
• Dynamically load data in your web part

Conclusion

The PnP ListPicker is a powerful control that simplifies list selection in SPFx development.

Key takeaways:

• Always use SharePoint Workbench for real data
• Avoid conflicting filters
• Use baseTemplate and contentTypeId carefully
• Ensure the callback is wired correctly

Once configured properly, the ListPicker becomes a key building block for dynamic and user-driven web parts.