title: Adding Function Reference to IconProps in React App
body: <p>In my React app I am using react-fluent-ui to handle a lot of the styling. In one block in my class-based component I am using a <code>TextField</code> for a filter element. I have also included a <code>clear</code> icon within the <code>TextField</code> so that the user can click it to clear the text from the input field. What I'm running into a block on is how to include a reference to a function within the block of code where the icon is. Note, the <code>onClick</code> needs to be on the icon specifically, not on the <code>TextField</code>. This is the block of code:</p>
  <pre><code>&lt;TextField
    label=&quot;ID:&quot;
    defaultValue={this.props.filters.id}
    onChange={this.onFilterById}
    styles={{ root: { maxWidth: 300 } }}
    borderless
    underlined
    iconProps={ clearIconProps }
  /&gt;
  </code></pre>
  <p>And the <code>iconProps</code> referenced above look like this:</p>
  <pre><code>const clearIconProps = {
    iconName: 'clear',
    cursor: 'pointer',
  }
  </code></pre>
  <p>When I try to add the function to the <code>clearIconProps</code> using fat arrow syntax, like so, I have a syntax error: (Parsing error: Unexpected token):</p>
  <pre><code>const clearIconProps = {
    onClick={() =&gt; clearFilter()},
    iconName: 'clear',
    cursor: 'pointer',
  }
  </code></pre>
  <p>I also tried this, but it also causes a syntax error: (Parsing error: Unexpected token):</p>
  <pre><code>const clearIconProps = {
    onClick={clearFilter},
    iconName: 'clear',
    cursor: 'pointer',
  }
  </code></pre>
  <p>And for the record, at the moment, <code>clearFilter()</code> looks like this:</p>
  <pre><code>const clearFilter = () =&gt; {
    // Add code to clear field
    console.log('clearFilter() was triggered...');
  }
  </code></pre>
  <p>How can I add the function to the icon within the <code>TextField</code>?</p>