Font-awesome: Icon not rerendering in react

[blaynem-moovel]

Here's an example: https://codesandbox.io/s/m55100zjqy

Using the CDN. If you click an item in the table, the icon will not change however the colors will. The code to take note of is

const iconClass = data.selected ? "fas fa-check-square" : "far fa-square"

[PeterShaggyNoble]

Duplicate of #11950.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I'm going to consider this a duplicate of #11950.

If the fix for #11950 will not solve this, please comment here and I will reopen

[blaynem-moovel]

Yeah, this isn't the same thing unfortunately. It changes color fine, but it should be changing the icon as well.

We worked out a fix by importing the CSS instead of relying on the CDN. But this is something that should probably be mentioned somewhere else!

Edit:
Started using the SVG with JS CDN and it didn't work. Switched to the Web Fonts with CSS and it worked!

[billti]

I'm seeing exactly the same thing as @blaynem-moovel . This isn't related to the issue this has been closed a duplicate of.

Looking at the code @blaynem-moovel wrote, I'm doing something similar. His has

      const iconClass = data.selected ? "fas fa-check-square" : "far fa-square"
      return (
        <tr className={rowClass} key={data.ID} onClick={() => this.handleClick(data.ID)}>
          <th scope="row"><i className={iconClass} /></th>

and mine has

  <div className="flyout-control" onClick={onMenuClick}>
     <i className={`fas ${isOpen ? "fa-times" : "fa-bars"} fa-2x fa-fw`} aria-hidden="true"></i>
  </div>

The key here is that when React re-renders the <i> component, only the className may have changed.

My same code was working fine with Font Awesome 4, and this broke trying to move to 5. I'm using the JS-only approach. Moving to CSS appears to have fixed it for @blaynem-moovel , but I'd rather stay with JS as I moved for the tree-shaking.

[robmadole]

If you are using React make sure and use https://www.npmjs.com/package/@fortawesome/react-fontawesome instead or switch back to the web fonts with CSS version of FA5.

[Maxnelson997]

@robmadole ty sir.

[llandau]

I had this same issue. I found this helpful: https://stackoverflow.com/a/49667476/1807627

[Bjodol]

If you want a quick and dirty work around for this you could have something along the following:

render(){
    const icon = someCondition ? "fa fa-info-circle" : "fa fa-bolt"
    return (
        <i key={icon}>
             <span className={icon} />
        </i>
    )
}

A change in the key prop will rerender the dom element, also triggering fontawesome to rerender