How to set the default for a pnp.sp people picker

Brass Contributor

I want a pnp.sp people picker to auto populate with the logged in user. Here's the render and the people picker:

    groupName={''} // Leave this blank in case you want to filter from all users
    selectedItems={this._loggedInUser}//This is the 'onChange'
    defaultSelectedUsers={this.state.LoggedInUserPPDefaultItems ? this.state.LoggedInUserPPDefaultItems : []}


The defaultSelectedUsers doesn't seem to work the way it's described. It requires a string array but if I put a state object of the logged in users email or login name (a string array type) into it nothing happens, the people picker stays blank. I have a getUser() function setting the state here:


public _getUser() { //getUser sets the state for multiple properties of the user.
    sp.web.currentUser.get().then((user) => {
            CurrentUserTitle: user.Title,
            CurrentUser: user.LoginName,
            CurrentUserID: user.Id,
            CurrentUserEmail: user.Email


Here's the function on change: This allows the people picker to be changed, if items is blank etc. Otherwise it populates the state. I'm not sure which state to use for the people picker.


private _loggedInUser(items) {

    if(items !== null && items.length > 0){
      LoggedInUser: items[0].id,
      LoggedInUserPPDefaultItems: [items[0].secondaryText]



My states involved:

Set in constructor:

LoggedInUserPPDefaultItems: [],
LoggedInUser: null,

CurrentUserTitle: null,
CurrentUser: null,
CurrentUserGroups: null,
CurrentUserID: null,
CurrentUserEmail: null,

In state file (separate interface):

LoggedInUserPPDefaultItems: string[];
LoggedInUser: string;

CurrentUserTitle: string;
CurrentUser: string[];
CurrentUserGroups: string;
CurrentUserID: string;
CurrentUserEmail: string;


any ideas?


8 Replies

Hi @Cardinal_Night ,

I think it is a timing issue, try to call your method inside  componentDidMount 


public componentDidMount() {

Learn more




GetUser() is running in componentDidMount.
Any other ideas?

Hi @Cardinal_Night ,

please tag me, or I don't receive notifications :)


So, if you debug render method


    defaultSelectedUsers={this.state.LoggedInUserPPDefaultItems ? this.state.LoggedInUserPPDefaultItems : []}


this.state is populated correctly?


Following docs


defaultSelectedUsersstring[]noDefault selected user emails or login names


Did you try do add a mocked value?











I feel you are setting the state of the


  in the 


method which will be called onChange.

So it wont get prepopulated ,when you load the form ,However is it getting populated when you focus or doing a key press ,as that will trigger onchange.

Remember setState is async



@O365Developer I think that you are correct but I'm not sure how to force the people picker to change on render. How would I do this?


Hi THomas,


You need to set the state of 


 to the current user values ,in the getUser() method which is invoked from componentDidMount() if I`m not wrong

How did you resolve ur issue ? Even i m trying to default users.. basically i get more than 5 users email from webservice, always these people new means (info wont be available in user information list) its a hidden people picker would like to prepopulate and save the item.. any idea how do i auto bind and trigger change event and capture usersid list so i can create item with the people picker column in the list?

Hey @Guruprasad1380,


I was able to get the default user using its title as the key for the defaultSelectedUsers property. In my componentDidMount, I get the user using the sp.web.currentUser.get() method, store it in the state and then pass [] to the defaultSelectedUsers property of the picker. Let me know if it doesn't work for you.