SPFx - React - Set Drop Down & People Picker Control values

Question

Hi All,

 

I have values stored in SharePoint list. Now I want to provide edit functionality to user so when user selects particular item, I’m showing user the fields in editable mode with existing values fetched from SharePoint list. In readItem() method, I’m able to set Text field and Date field but not able to set selected value (which is stored in SP list under that column) to Dropdown and PeoplePicker and checkbox.

 

In .ts file:

export interface IProjectName
{
name: string;
firstdate: Date;
dpselectedItem?: { key: string | number | undefined };
dpselectedItems: IDropdownOption[]; pplPickerType:string; userIDs: number[];
userManagerIDs: number[]; Items:IDropdownOption[];
}

In .tsx file I have below code under Constructor,

this.state =
{
name: "", firstdate: null,
dpselectedItem: undefined,
dpselectedItems: [],
userIDs: [],
userManagerIDs: [],
pplPickerType: "", Items: this._getItems()
};
}
Public componentDidMount()
{
this.readItem(itemID);
}
}

To get DropDown values I’ve method as below

private _getItems()
{
return [ { key: ABC', text: ABC }, { key: 'DEF', text: 'DEF' }, { key: 'GHI', text: GHI } ]
}

Under render:

public render(): React.ReactElement<…>
{
return( <div> <Dropdown
placeHolder="Select an Option" label=""
defaultValue="Select an Option"
id="component"
selectedKey={dpselectedItem ? dpselectedItem.key : undefined}
ariaLabel="Basic dropdown example"
options={this.state.getItems}
onChanged={this._changeState} />
</div>
<div>
<label>Assigned To</label>
</div>
<div>
<PeoplePicker context={this.props.context}
personSelectionLimit={1}
groupName={""}
showtooltip={false}
isRequired={false}
selectedItems={this._getManager}
principalTypes={[PrincipalType.User]}
ensureUser={true}
defaultSelectedUsers={[this.state.AssignedTo]} />
</div> )
private _changeState = (item: IDropdownOption): void => { this.setState({ dpselectedItem: item }); }
private readItem(itemID: number): void { pnp.sp.web.lists.getByTitle("List Title").items.getById(itemID).get().then((item: any) => { this.setState({ name: item.Title});
let strfirstDate = new Date(item.firstDate);
this.setState({ firstdate: strfirstDate });
//Get value from SP List Item and set to DropDown
//Get value from SP List Item and set to PeoplePicker
});