Adding Function Reference to IconProps in React App

Question

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 TextField for a filter element. I have also included a clear icon within the TextField 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 onClick needs to be on the icon specifically, not on the TextField. This is the block of code:

<TextField
  label="ID:"
  defaultValue={this.props.filters.id}
  onChange={this.onFilterById}
  styles={{ root: { maxWidth: 300 } }}
  borderless
  underlined
  iconProps={ clearIconProps }
/>

And the iconProps referenced above look like this:

const clearIconProps = {
  iconName: 'clear',
  cursor: 'pointer',
}

When I try to add the function to the clearIconProps using fat arrow syntax, like so, I have a syntax error: (Parsing error: Unexpected token):

const clearIconProps = {
  onClick={() => clearFilter()},
  iconName: 'clear',
  cursor: 'pointer',
}

I also tried this, but it also causes a syntax error: (Parsing error: Unexpected token):

const clearIconProps = {
  onClick={clearFilter},
  iconName: 'clear',
  cursor: 'pointer',
}

And for the record, at the moment, clearFilter() looks like this:

const clearFilter = () => {
  // Add code to clear field
  console.log('clearFilter() was triggered...');
}

How can I add the function to the icon within the TextField?

[It looks](https://learn.microsoft.com/en-us/javascript/api/office-ui-fabric-react/iiconprops?view=office-ui-fabric-react-latest) like iconProps doesn't have these fields — GalAbra, Jan 19 '21 at 18:59

Ravi Ojha · Accepted Answer · 2021-01-19T21:35:00.933

As suggested by @NiceToMeetYou, This piece of code is wrong:

const clearIconProps = {
  onClick={clearFilter}, // This has to be corrected to onClick: clearFilter,
  iconName: 'clear',
  cursor: 'pointer',
}

Now it becomes something like this:

const clearIconProps = {
  onClick: clearFilter,
  iconName: 'clear',
  cursor: 'pointer',
}

We will have to do something like this, to achieve => Note, the onClick needs to be on the icon specifically, not on the TextField. This is the block of code:

class TextFieldBasicExample extends React.Component {
  constructor(props) {
    super(props);
  }
  
  componentDidMount() {
    const node = ReactDOM.findDOMNode(this);
    if (node instanceof HTMLElement) {
      const child = node.querySelector('i');
      child.addEventListener('click', () => console.log("Hello world"))
      console.log("I am here", child)
    }
  }
  
  render() {
    return (
      <Stack horizontal tokens={stackTokens} styles={stackStyles}>
        <Stack {...columnProps}>
          <TextField label="With an icons" iconProps={iconProps} />
        </Stack>
       </Stack>
    );
  }
}

Here is the complete code for the same: codepen

Like I mentioned before, you can pass `clearFilter` to the `onClick` property within `clearIconProps`, but it will not execute the function. — Muirik, Jan 19 '21 at 19:49
Yes, you were right. It does support `onClick`. https://codepen.io/rbojha/pen/ExgMmLv — Ravi Ojha, Jan 19 '21 at 20:06
@Muirik I have updated the answer above with `codepen` link. Thanks good stuff. — Ravi Ojha, Jan 19 '21 at 21:36

Dong0321 · Answer 2 · 2021-01-19T20:13:03.733

0

Fluent UI does not support the click event from icon on TextField. You should create a function manually... Try to do as the following.

class YourComponent ... {
   constructor() {
       this.unifiedTextFieldId = xxx; // init textfield id
       ...
   }
   componentDidMount() {
      const textField = document.getElementById(this.unifiedTextFieldId);
      if(textField) {
          const inputEle = textField.getElementsByTagName('input')[0];
          inputEle.parentNode.childNodes[1].addEventListener('click', clearFilter);
      }
   }
   ...
   render() {
       return (
         ...
       <TextField
          id = {this.unifiedTextFieldId}
          label="ID:"
          defaultValue={this.props.filters.id}
          onChange={this.onFilterById}
          styles={{ root: { maxWidth: 300 } }}
          borderless
          underlined
          iconProps={ clearIconProps }
       />
      ...

edited Jan 19 '21 at 20:13

answered Jan 19 '21 at 19:09

Dong0321

121
1
5

That resolves the syntax error. However, it does not execute the function upon click. – Muirik Jan 19 '21 at 19:13
No, because then the function would fire when they click into the field to add text. As I mentioned in my question, the click needs to be on the icon only. – Muirik Jan 19 '21 at 19:18
Sorry. I have no experience in react-fluent-ui. Would you like to share it's link to let me review it? – Dong0321 Jan 19 '21 at 19:21
Updated my answer, please check it and let me know the result. – Dong0321 Jan 19 '21 at 19:36
Thanks, but this is a React class-based component, and you can't use useEffect (or any other hook) in a class component. – Muirik Jan 19 '21 at 19:36
So if you place code within the `componentDidMount()` lifecycle, like the name implies, it will only fire when the component first mounts. – Muirik Jan 19 '21 at 19:56
Even the TextField DOM would be updated continuously, icon click event should be added for ONE time. – Dong0321 Jan 19 '21 at 20:10

Adding Function Reference to IconProps in React App

2 Answers2