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

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(
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} />

Assigned To

this.props.context}

personSelectionLimit={1}

groupName={""}

showtooltip={false}

isRequired={false}

selectedItems={this._getManager}

principalTypes={[PrincipalType.User]}

ensureUser={true}

defaultSelectedUsers={[this.state.AssignedTo]} />