0

I'm having a React component that has both mgt-people and mgt-people-picker which takes props from its parent component. The idea is to update mgt-people by selecting people from mgt-people-picker, but it's not working. It did update in simply <div>{props.users}</div>, so I think it might be an mgt component issue? I also tried making the users a local state in the child component but it didn't work either.

My simplfied code is as below. All the users variables are in type of string[]

parent:

function updateUsers(newUsers) {
    setState({ users: newUsers });
}

render:
<ChildComponent users={this.state.users} updateUsers={this.updateUsers} />

child:

function updateUsers() {
    props.updateUsers(newPeople);
}

peoplePicker.addEventListener('selectionChanged', updateUsers);
peoplePicker.selectUsersById(props.users);

render:
<div>{props.users}</div>
<mgt-people user-ids={props.users}></mgt-people>
<mgt-people-picker></mgt-people-picker>
H Z
  • 7
  • 3
  • `user-ids` take in an array of string ids (['id', 'id']), so I don't think this will work. Can you try setting the `people` property to the props.users. You will need to set that in the `componentDidMount` event with a ref to the `mgt-people` component? – Nikola Metulev Feb 25 '20 at 19:10
  • Hi Nikola, I did pass the array of user ids. Didn't specify it for the simplicity. I tried using ref to set userIds but it still didn't update with new people. – H Z Feb 25 '20 at 23:28
  • I checked the element html, the `user-ids` attribute of `mgt-people` actually got updated, it's the `#shadow-root` that didn't update. Is there a fix? – H Z Feb 25 '20 at 23:45
  • Apologies for the delay in getting back to you HZ. I was able to verify this is a bug in the toolkit and have opened an issue [here](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/310). Should be fixed for next release. – Nikola Metulev Mar 03 '20 at 03:47
  • That being said, I would optimize your solution here by using the `mgt-people.people` property instead of the `user-ids` attribute - that should work just fine. The reason why I recommend the `people` property is because that way the `mgt-people` component does not have to make additional calls to the graph. – Nikola Metulev Mar 03 '20 at 03:49

1 Answers1

0

To provide closure with this question, this was an issue that was recently resolved with the 1.2 release of the Microsoft Graph Toolkit. The people component will now update when the user-ids property changes

Nikola Metulev
  • 566
  • 3
  • 7