[SOLVED] Office ui Fabric People Picker, pass varaibles to onChangeEvent

Office ui Fabric People Picker, pass varaibles to onChangeEvent

I would like to know if there is a possibility to added a variable to the default onchange event of the office ui fabric react People Picker component.

In the onchange event default is onChange?: (items?: IPersonaProps[]) => void

I would like to pass an variable to add to an array like Key Value for using later in my code.

Solution

You can build a HOC to achieve this.

Define

// Your HOC component

interface Props {
  yourCustomState: string // get custom value from props
...


return (
  <>
    <Select
      onChange={(e: any) => onChange(e, yourCustomState)} // add custom value to callBack function
  ...

Usage


handleOnChangeEvent = () => (event, yourCustomStateValue: string) => {
  console.log(yourCustomStateValue);
  ... // event
}

<YourComponent
  yourCustomState={value}
  onChange={this.handleOnChangeEvent()}
...