how to save user to people and group field using SPFx?

Question

I am using react people picker from github and I would like to save the users to a sharepoint list. Can someone help with this issue?

How do I save the users in a field called Persons? 'Persons' : ${this.state.selectedItems[0]._user.Email},

Thanks.

This is my current code:

  public render(): React.ReactElement<IOfficeUiFabricPeoplePickerProps> {
    if (this.props.typePicker == "Normal") {
      return (
        <div>
        <NormalPeoplePicker
          onChange={this._onChange.bind(this) }
          onResolveSuggestions={this._onFilterChanged }
          getTextFromItem={(persona: IPersonaProps) => persona.primaryText}
          pickerSuggestionsProps={suggestionProps}
          className={'ms-PeoplePicker'}
          key={'normal'}
        />


        <button onClick={() => this.CreateUser()}>Add Item</button>
          <label>SomeLabel</label>
        </div>


      );
    } else {
      return (
        <CompactPeoplePicker
          onChange={this._onChange.bind(this) }
          onResolveSuggestions={this._onFilterChanged }
          getTextFromItem={(persona: IPersonaProps) => persona.primaryText}
          pickerSuggestionsProps={suggestionProps}
          className={'ms-PeoplePicker'}
          key={'normal'}
        />
      );
    }
  }

  private _onChange(items:any[]) {
    this.setState({
      selectedItems: items
    });
    if (this.props.onChange)
    {
      this.props.onChange(items);
    }
  }


    private CreateUser(): void {
    this.setState({
      status: 'Adding item...',
      // items: []
      //myValue : this.state.myValue
    });
    this.getListItemEntityTypeName()
      .then((listItemEntityTypeName: string): Promise<SPHttpClientResponse> => {

        //var elem:HTMLElement = (document.getElementById('inputValeur'));
        //var a = elem.title;

       // var elem = document.getElementById('inputValeur');
        //var elem = (document.getElementById('inputValeur') as HTMLInputElement).value;


        //const input=document.getElementById("inputValeur");
        const body: string = JSON.stringify({
          '__metadata': {
            'type': listItemEntityTypeName
          },

          'Title' : `Item Valeur =: `,
          //'Persons' : `${this.state.selectedItems[0]._user.Email}`,
          'Text' : `${this.state.selectedItems[0]._user.name}`+ `${this.state.selectedItems[1]._user.Email}`

        });
        return this.props.spHttpClient.post(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items`,
          SPHttpClient.configurations.v1,
          {
            headers: {
              'Accept': 'application/json;odata=nometadata',
              'Content-type': 'application/json;odata=verbose',
              'odata-version': ''
            },
            body: body
          });
      })
      .then((response: SPHttpClientResponse): Promise<IListItem> => {
        return response.json();
      })
      .then((item: IListItem): void => {
        this.setState({
          status: `Item '${item.Title}' (ID: ${item.Id}) successfully created`,
          items: []
        });
      }, (error: any): void => {
        this.setState({
          status: 'Error while creating the item: ' + error,
          items: []
        });
      });
  }

Answer 1

Someone else seems to have issues updating a user field: Stack Overflow.

First, you must add 'Id' to the static name of the field in your POST data.

Then, you must give it an ID value. The ID can be retrieved using the email address with the ensureUser call (Stack Overflow).

Hope this helps!