SPFx How to fetch data from peoplepicker?

Hi,

I have been working with a SPFx from that contains several controls. The most part of them are working but I am having bad time with the peoplepicker.
the peoplepicker control that I am using is the one from pnp.
The problem is it is not saving nothing and instead is dropping a 400 error.
I was following an example on the internet but it seems that the example doesn’t work either.

This is how I am doing:

In the state I have this:

export interface IPeopleState {
    salesmanager: string;
    salesManagerId: number[];
}

In the constructor I have this:

constructor(props: IPeoplepickerProps) {
    super(props);

    this.state={
      salesmanager: "",
      salesManagerId: [],
    }

    this._createItem = this._createItem.bind(this);
    this._getManager = this._getManager.bind(this);
  }

The peoplepicker component doesn’t have any strange code and looks like this:

<PeoplePicker
              context={this.props.context}
              titleText="Sales Manager"
              personSelectionLimit={1}
              groupName={""} // Leave this blank in case you want to filter from all users
              showtooltip={true}
              isRequired={false}
              disabled={false}
              selectedItems={this._getManager}
/>

And the _getManager method is the one that should update the state with the name of the choosen user:

private _getManager(items: any[]) {
    this.state.salesManagerId.length = 0;
    let tempuserMngArr = [];
    for (let item in items) {
      tempuserMngArr.push(items[item].text);
    }
    this.setState({ salesmanager: tempuserMngArr[0].toString() });

    console.log(this.state.salesmanager); // log empty

    console.log(tempuserMngArr[0].toString()); // log full name
  }

In the second console log I am getting the value I want for example John Doe
But when I run console log on the this.state.manager it shows that it is empty. I don’t know why the state doesn’t get the value from tempuserMangArr ?

What is wrong?

UPDATE:
I found that by updating the _getManagers method like this:

private async _getManager(items: any[]) {
    await this.setState({ salesmanager: items[0].text });
   console.log(this.state.salesmanager);
  }

I am available to feth the full name from the state.
Now I have another problem and it is in the method that actually create the new item in the list.
Here is it:

private _createItem(): void {
    pnp.sp.web.lists.getByTitle("people").items.add({
      salesmanager: this.state.salesmanager
    });
  }

The problem is that the console is saying this:

A ‘PrimitiveValue’ node with non-null value was found when trying to read the value of a navigation property; however, a ‘StartArray’ node, a ‘StartObject’ node, or a ‘PrimitiveValue’ node with null value was expected.

And I don’t know what it means!
Offcourse, no new item is getting created because of this.

UPDATE 2

Now I know why I am getting the error message on the console. It has to do with the way I am saving the salesmanager in the list.
I tested with saving the salesmanager in a normal single text column and it works, so I suspect that it has something to do with the fact that people columns works like:
salesmanager/Firstname - salesmanager/Lastname

So my question now is how save the salesmanager in the people column?

Best regards
Americo

Hi Americo, have you got the result?. if so please let me know how to do it.
this is my code:
export interface IIReactSpFxPnP {
userMemberIDs: string;
}
In the constructor I have this:
constructor() {
super();
this._getMember = this._getMember.bind(this);
this.state = {
userMemberIDs: ,
}

get_Member:
private _getMember(items: any)
{
console.log(‘Items:’, items);
let selectedUsers = ;
for (let item in items)
{
selectedUsers.push(items[item].id);
}
this.setState({ userMemberIDs: selectedUsers });
}.

so what is wrong with my code? why i’m not getting the user in my person or group list field?
but i’m getting user detail in choice column like this: i:0#.f|membership|mubaid@sharepoint.com
please let me know