How to use mgt-people-picker in react framework

Question

I'm trying to use mgt-people-picker inside my SPFx Webpart with React framework, and couldn't get the selected-people attribute work. I tried passing an array of graph user objects to it but no luck.

When I tried to use

document.querySelector('mgt-people-picker').selectUsersById(["id","id"])

it threw an error saying "Property 'selectUsersById' does not exist on type 'Element'"

The documentation is quite limited and unclear and there isn't much reference that I could find. Can anyone tell me how to use it?

Answer 1

React passes all data to web components in the form of HTML attributes. For primitive data this is fine, but it does not work when passing rich data, like objects or arrays. In those cases you will need to use a ref to pass in the object. See docs

Here is an example setting the users by id:

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  public render(): React.ReactElement<IHelloWorldProps> {
    return (
      <mgt-people-picker ref="peoplePicker"></mgt-people-picker>
    );
  }

  componentDidMount() {
    if (this.refs.peoplePicker) {
      let peoplePicker = this.refs.peoplePicker as MgtPeoplePicker;

      peoplePicker.addEventListener('selectionChanged', e => console.log(peoplePicker.selectedPeople));

      peoplePicker.selectUsersById(['4782e723-f4f4-4af3-a76e-25e3bab0d896']);
    }
  }
}

Answer 2

With React, you can use PeoplePicker from the @microsoft/mgt-react module. Here is an example:

  <PeoplePicker
    selectionMode="single"
    defaultSelectedUserIds={[Inky@pathto.onmicrosoft.com"}]}
    selectionChanged={onChangePeople}
  />

And the event handler:

  function onChangePeople(e) {
    console.log(e.detail);
  }