Pnp Js with Sharepoint spfx ListItemPicker

Question

I am using Pnp ListItemPicker for a SharePoint project developed using (SPFx, ReactJs, PnPjs), i am using a SharePoint list called 'Vendor' to populate data into the ListItemPicker (Works without any issues), I am using a sample list called 'simpleSPFx' where it consists the Vendor as a Lookup column, I can easily use the ListItemPicker and save data without any issues. But when trying to set data is where i am facing an issue.The ListItemPicker picker consists a property called defaultSelectedItems of data type any[], when setting the data manually (hardcode) it will show perfectly without any issues. But when using react setState to set values into the defaultSelectedItems of the ListItemPicker it wouldn't show any record/ item.

Setting data manually works like this enter image description here

Setting data using setState into a any[] variable called as CurrentVendor doesn't work enter image description here

Answer 1

This bug comes from Fabric UI TagPicker. ListItemPicker use TagPicker. A workaround is to use Spinner until _spHelper responses the default value, then we can load ListItemPicker.

{this.state.defaultItems && <ListItemPicker ... />}
{!this.state.defaultItems && <Spinner ... />}