How to get and set People Picker value in react spfx webpart

How to get and set People Picker value in react spfx webpart ?

1.      Add React Webpart as ReactDemo

2.      Open IReactDemoProps.ts file from webpart component folder and  add webpartcontext in webpart interface

import { WebPartContext } from "@microsoft/sp-webpart-base";

// add WebPartContext context on webpart

export interface IReactDemoProps {

                description: string;

                context:WebPartContext;

}

3.      then open .tsx file from component folder

Check below code step by step to add people picker control

import * as React from 'react';

import styles from './ReactDemo.module.scss';

import { IReactDemoProps } from './IReactDemoProps';

import { escape } from '@microsoft/sp-lodash-subset';

//step1 import fabric react, pnp-spfx,pnp  module and, add label and button refrence

import {Label,PrimaryButton} from 'office-ui-fabric-react';

//if this modules is not installed then use the command to install 'npm install @pnp/spfx-controls-react --save'

import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";

import pnp from 'sp-pnp-js';

//step2 create a interface for controls

export interface IControls

{

  pplControl:any;

}

export interface IPeoplePickerControl

{

  id:string;

  secondaryText:string;

  text:string;

}

//step3 replace IControls Interface with {}

export default class ReactDemo extends React.Component<IReactDemoProps,IControls> {

  //step4 add a constructor

constructor(props)

{

  //step5 define the super method

  super(props);

  //step6 intialize control state to set the default value on page load

  this.state={

    pplControl:[]

  };

  //step9 bind event onchange

  this.PeoplePickerItems=this.PeoplePickerItems.bind(this);

  this.ButtonClick=this.ButtonClick.bind(this);

}

//step7 and 10 add controls in render method

  public render(): React.ReactElement<IReactDemoProps> {

pnp.setup({

  spfxContext:this.props.context

});

    return (

      <div className={ styles.reactDemo }>

        <div className={ styles.container }>

          <div className={ styles.row }>

            <div className={ styles.column }>

              <Label className={styles.label}>People Picker</Label>

              <PeoplePicker

                context={this.props.context}

                titleText="People Picker"

                personSelectionLimit={3}

                groupName={""} // Leave this blank in case you want to filter from all users

                showtooltip={false}

                isRequired={true}

                disabled={false}

                selectedItems={this.PeoplePickerItems}

                showHiddenInUI={false}

                principalTypes={[PrincipalType.User]}

                resolveDelay={1000}

                />

                <PrimaryButton className={styles.button} onClick={this.ButtonClick} >Get People Picker Value</PrimaryButton>

            </div>

          </div>

        </div>

      </div>

    );

  }

  //step8 to set the state value on changed in people picker control

  private PeoplePickerItems(items: any[])

  {

    this.setState({pplControl:items});

  }

//get people picker value on button click

  private ButtonClick()

  {

   let pplValue:IPeoplePickerControl[]=this.state.pplControl;

   pplValue.forEach(ppl=>

    {

           //get user’s id

                alert(ppl.id);

    });

  }

}

Result:è