title: Do I need something particular to use UI Fabric PeoplePicker with React?
body: <p>I'm trying to use Microsoft control PeoplePicker from UI Fabric to get an Office-feel in my app.
  I'm able to use control like Dropdown and button, but when I want to use PeoplePicker, I get error in code even if I change nothing.</p>
  
  <p>To start my component code, I've copy-paste Normal People Picker from <a href="https://developer.microsoft.com/en-us/fabric#/controls/web/peoplepicker" rel="nofollow noreferrer">https://developer.microsoft.com/en-us/fabric#/controls/web/peoplepicker</a>, and I get two error (for now).</p>
  
  <ol>
  <li><strong>Line 48:66:  Parsing error: Unexpected token, expected ","</strong> and my line 48 is :<br><code>return peopleList.filter(item =&gt; doesTextStartWith(item.text as string, filterText));</code> <br>
  pointing <code>item.text as string</code>. I guess this error come from the use of <code>as string</code> in JS code. When I replace all <code>as string</code> to <code>.toString()</code>, the error disapear.</li>
  <li><strong>Unexpected token (26:79)</strong> and my line 26 is :<br><code>const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState&lt;IPersonaProps[]&gt;(mru);</code> <br>pointing <code>[]</code> after <code>IPersonaProps</code>.</li>
  </ol>
  
  <p>Since I take code from Microsoft, and it's not working on my computer, I guess I'm missing something. I was expecting to get the same result as the sample on their website.</p>
  
  <p>I have <em>office-ui-fabric-react</em> in my Node's module.</p>
  
  <p>Here's my code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import * as React from 'react';
  import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
  import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
  import { IBasePickerSuggestionsProps, NormalPeoplePicker, ValidationState } from 'office-ui-fabric-react/lib/Pickers';
  import { people, mru } from '@uifabric/example-data';
  
  const suggestionProps: IBasePickerSuggestionsProps = {
    suggestionsHeaderText: 'Suggested People',
    mostRecentlyUsedHeaderText: 'Suggested Contacts',
    noResultsFoundText: 'No results found',
    loadingText: 'Loading',
    showRemoveButtons: true,
    suggestionsAvailableAlertText: 'People Picker Suggestions available',
    suggestionsContainerAriaLabel: 'Suggested contacts'
  };
  
  const checkboxStyles = {
    root: {
  marginTop: 10
    }
  };
  
  export const PeoplePickerNormalExample: React.FunctionComponent = () =&gt; {
    const [delayResults, setDelayResults] = React.useState(false);
    const [isPickerDisabled, setIsPickerDisabled] = React.useState(false);
    const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState&lt;IPersonaProps[]&gt;(mru);
    const [peopleList, setPeopleList] = React.useState&lt;IPersonaProps[]&gt;(people);
  
    const picker = React.useRef(null);
  
    const onFilterChanged = (
  filterText: string,
  currentPersonas: IPersonaProps[],
  limitResults?: number
    ): IPersonaProps[] | Promise&lt;IPersonaProps[]&gt; =&gt; {
  if (filterText) {
    let filteredPersonas: IPersonaProps[] = filterPersonasByText(filterText);
  
    filteredPersonas = removeDuplicates(filteredPersonas, currentPersonas);
    filteredPersonas = limitResults ? filteredPersonas.slice(0, limitResults) : filteredPersonas;
    return filterPromise(filteredPersonas);
  } else {
    return [];
  }
    };
  
    const filterPersonasByText = (filterText: string): IPersonaProps[] =&gt; {
  return peopleList.filter(item =&gt; doesTextStartWith(item.text as string, filterText));
    };
  
    const filterPromise = (personasToReturn: IPersonaProps[]): IPersonaProps[] | Promise&lt;IPersonaProps[]&gt; =&gt; {
  if (delayResults) {
    return convertResultsToPromise(personasToReturn);
  } else {
    return personasToReturn;
  }
    };
  
    const returnMostRecentlyUsed = (currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise&lt;IPersonaProps[]&gt; =&gt; {
  setMostRecentlyUsed(removeDuplicates(mostRecentlyUsed, currentPersonas));
  return filterPromise(mostRecentlyUsed);
    };
  
    const onRemoveSuggestion = (item: IPersonaProps): void =&gt; {
  const indexPeopleList: number = peopleList.indexOf(item);
  const indexMostRecentlyUsed: number = mostRecentlyUsed.indexOf(item);
  
  if (indexPeopleList &gt;= 0) {
    const newPeople: IPersonaProps[] = peopleList.slice(0, indexPeopleList).concat(peopleList.slice(indexPeopleList + 1));
    setPeopleList(newPeople);
  }
  
  if (indexMostRecentlyUsed &gt;= 0) {
    const newSuggestedPeople: IPersonaProps[] = mostRecentlyUsed
      .slice(0, indexMostRecentlyUsed)
      .concat(mostRecentlyUsed.slice(indexMostRecentlyUsed + 1));
    setMostRecentlyUsed(newSuggestedPeople);
  }
    };
  
    const onDisabledButtonClick = (): void =&gt; {
  setIsPickerDisabled(!isPickerDisabled);
    };
  
    const onToggleDelayResultsChange = (): void =&gt; {
  setDelayResults(!delayResults);
    };
  
    return (
  &lt;div&gt;
    &lt;NormalPeoplePicker
      onResolveSuggestions={onFilterChanged}
      onEmptyInputFocus={returnMostRecentlyUsed}
      getTextFromItem={getTextFromItem}
      pickerSuggestionsProps={suggestionProps}
      className={'ms-PeoplePicker'}
      key={'normal'}
      onRemoveSuggestion={onRemoveSuggestion}
      onValidateInput={validateInput}
      removeButtonAriaLabel={'Remove'}
      inputProps={{
        onBlur: (ev: React.FocusEvent&lt;HTMLInputElement&gt;) =&gt; console.log('onBlur called'),
        onFocus: (ev: React.FocusEvent&lt;HTMLInputElement&gt;) =&gt; console.log('onFocus called'),
        'aria-label': 'People Picker'
      }}
      componentRef={picker}
      onInputChange={onInputChange}
      resolveDelay={300}
      disabled={isPickerDisabled}
    /&gt;
    &lt;Checkbox label="Disable People Picker" checked={isPickerDisabled} onChange={onDisabledButtonClick} styles={checkboxStyles} /&gt;
    &lt;Checkbox
      label="Delay Suggestion Results"
      defaultChecked={delayResults}
      onChange={onToggleDelayResultsChange}
      styles={checkboxStyles} /&gt;
  &lt;/div&gt;
    );
  };
  
  function doesTextStartWith(text: string, filterText: string): boolean {
    return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
  }
  
  function removeDuplicates(personas: IPersonaProps[], possibleDupes: IPersonaProps[]) {
    return personas.filter(persona =&gt; !listContainsPersona(persona, possibleDupes));
  }
  
  function listContainsPersona(persona: IPersonaProps, personas: IPersonaProps[]) {
    if (!personas || !personas.length || personas.length === 0) {
  return false;
    }
    return personas.filter(item =&gt; item.text === persona.text).length &gt; 0;
  }
  
  function convertResultsToPromise(results: IPersonaProps[]): Promise&lt;IPersonaProps[]&gt; {
    return new Promise&lt;IPersonaProps[]&gt;((resolve, reject) =&gt; setTimeout(() =&gt; resolve(results), 2000));
  }
  
  function getTextFromItem(persona: IPersonaProps): string {
    return persona.text as string;
  }
  
  function validateInput(input: string): ValidationState {
    if (input.indexOf('@') !== -1) {
  return ValidationState.valid;
    } else if (input.length &gt; 1) {
  return ValidationState.warning;
    } else {
  return ValidationState.invalid;
    }
  }
  
  /**
   * Takes in the picker input and modifies it in whichever way
   * the caller wants, i.e. parsing entries copied from Outlook (sample
   * input: "Aaron Reid &lt;aaron&gt;").
   *
   * @param input The text entered into the picker.
   */
  function onInputChange(input: string): string {
    const outlookRegEx = /&lt;.*&gt;/g;
    const emailAddress = outlookRegEx.exec(input);
  
    if (emailAddress &amp;&amp; emailAddress[0]) {
  return emailAddress[0].substring(1, emailAddress[0].length - 1);
    }
  
    return input;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>and I use it like this in my App. I've put <code>&lt;...&gt;</code> to keep code short. Everything is working in this section.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { Fabric } from 'office-ui-fabric-react/lib/Fabric'
  import PeoplePickerNormalExample from "./components/MyCustom_Picker.js"
  
  class App extends React.Component {
    render() {
      return ( 
        &lt;Fabric className = "App" &gt;
          &lt;PeoplePickerNormalExample / &gt;
          &lt;...&gt;
        &lt;/Fabric&gt;
      );
    }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>