Exposing data from a search box web part

To meet our requirement of searching for a product, we’ll create another search box web part in the same solution and connect it to the existing products catalog using the dynamic data feature. On the source side, we need to perform the following steps:

1. Create a new web part in the existing SPFx solution.
2. Implement a search box control.
3. Configure the web part to be used as a dynamic data source.

Let’s do that now.

Creating and configuring the new web part

To create the new web part structure, we again use the SPFx Yeoman generator with the following command from the solution root folder:

yo @microsoft/sharepoint --component-type "webpart" --component-name "PacktProductSearchBox" --framework "react" --environment "spo" --package-manager "npm" --skip-feature-deployment

Unlike the first time we configured the solution, the Yeoman generator is smart...