How to blank a People Picker (PnP, spfx, react)

[Cardinal_Night]

I have an spfx form on a SharePoint Online site collection which reads/writes data to an SP list. I have 3 people pickers which I've managed to submit (using a submit button) successfully to the list. I can also retrieve these 3 people pickers from the list successfully. The problem is when I remove a user from any of the people pickers. The console gives me an error of Unable to get property 'id' of undefined or null reference. I think I need something that can handle the removal of a user in the function but I can't think what. I subsequently want the user (using the form) to be able to remove the user from the PP and then click an update button to update and submit the change.

Here's 1 of the 3 people pickers in the render (no point putting all 3!):

<PeoplePicker
         context={this.props.context}
         personSelectionLimit={1}
         groupName={''} // Leave this blank in case you want to filter from all users
         showtooltip={false}
         isRequired={false}
         disabled={false}
         selectedItems={this._deptContGetPeoplePickerItems}//This is the 'onChange'
         showHiddenInUI={false}
         defaultSelectedUsers={this.state.DeptContactPPDefaultItems ? this.state.DeptContactPPDefaultItems : []}//this is the value it means if this.state.PeoplePickerDefaultItems is truthy then show it, if not then don't
         principalTypes={[PrincipalType.User]}
         resolveDelay={1000}
         ensureUser={true}
    />

 Here are the 3 (1 per PP) functions for all 3 of the people pickers. These functions are assigned (as you can see above) to the selectedItems property of the PP. I believe this is the 'onChange' property of the PP:

 private _deptContGetPeoplePickerItems(items) {
    if(items !== null){
    this.setState({
      DeptContact: items[0].id,
      DeptContactPPDefaultItems: [items[0].secondaryText],
      
    }, ()=>{
      console.log(this.state.DeptContact+'this.state.DeptContactADD');
      console.log(this.state.DeptContactPPDefaultItems+'this.state.DeptContactPPDefaultItemsADD');
    });
   } 
   if(items === null){
    
     this.setState({
      DeptContact: items[0].id,
      DeptContactPPDefaultItems: [items[0].secondaryText]  
     }, () => {
      console.log(this.state.DeptContact+'this.state.DeptContactNULLADD');
      console.log(this.state.DeptContactPPDefaultItems+'this.state.DeptContactPPDefaultItems[]ADD');
     });
   }
  }

  private _linkAdvGetPeoplePickerItems(items) {
    if(items !== null){
    this.setState({
      LinkAdviser: null,
      LinkAdviserPPDefaultItems: []
    });
  } 
  if(items === null){
    this.setState({
      LinkAdviser: items[0].id,
      LinkAdviserPPDefaultItems: [items[0].secondaryText]
    });
   }
  }

  private _linkAdv2GetPeoplePickerItems(items) {
    if(items === null){
      this.setState({
        LinkAdviser2: null,
        LinkAdviser2PPDefaultItems: []
      });
    } else if(items){
    this.setState({
      LinkAdviser2: items[0].id,
      LinkAdviser2PPDefaultItems: [items[0].secondaryText]
    });
   }
  }

As you can see I've attempted to handle removal of a user from the PP with the if. I seem to think a lot can be handled with if's!

As I've mentioned above, it says 'Unable to get property 'id' of undefined or null reference' when I remove a user from the PP. This error happens when I actually click the remove x on the PP, not during submission or update btw.

Anyone see what I'm missing here?

T

[#2]

Hi @Cardinal_Night ,

Without trying it out, just looking at your code, I think the error you are getting may be from the following line on the "onChange" functions

DeptContact: items[0].id,

You have a "if" to check if the items object is null, but when the people picker is empty, I believe it returns an empty array. You can check list by adding a console.log or debugging before the if statement.

If so, update your "if" condition to also validate that items.length > 0

Hope this helps

[#3]

@Joel Rodrigues Hi Joel,

Yes you are right - but I'm struggling to find a way to evaluate it as blank. When removing the user from the PP, it's always evaluating as not null. This is what I'm trying now but it's still evaluating as not null:

private _deptContGetPeoplePickerItems(items) {
      if(this.state.DeptContact !== null){
        console.log('Dept Contact not null');
    this.setState({
      DeptContact: items[0].id,
      DeptContactPPDefaultItems: [items[0].secondaryText],
    
        });
      } else if(this.state.DeptContact){
        console.log('Dept Contact is null');
      }
    }

Do I have to use an async await so when the a user clicks to blank the pp, it waits for the state  to empty, then the if can run?

If so...how?

T

[#4 · Accepted solution]

@Cardinal_Night 

I think you should be evaluating the items object and not the state as you are using that function to set the state

Have you tried something like:

if(items !== null && items.length > 0){

[#5]

@Joel Rodrigues - thanks Joel. That was one of those that has been bugging me for a while. I got close to your answer at one point but took the wrong direction and hit a dead end. Thanks again.