Fontawesome Icon className won't update

React
1

I’m working on the Like Component exercise in Composing Components and I’m working with the latest version of Fontawesome, so I’ve installed @fortawesome/fontawesome-free and imported:

import '@fortawesome/fontawesome-free/js/fontawesome.js';
import '@fortawesome/fontawesome-free/js/solid.js';
import '@fortawesome/fontawesome-free/js/brands.js';

The icon is wrapped in button to get the onClick event. In the handler I update the state, which I then use to conditionally set the icon’s className. In the render event the state is showing correctly, but the class doesn’t change.

I created the following test to find the problem. You can see both an icon wrapped in a button and another not, to see if the button was somehow the problem. Neither icon’s class updates. I’m also updating the class of the button based on the same property in the state and that is working.

Thanks in advance for any assistance.

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  state = { liked: false }

  btnLike_click = () =>{
    const liked = !this.state.liked;
    this.setState({liked});
  }

  render() { 
    return (

      <div className="App">
        <button className={this.state.liked ? "btn btn-primary" : "btn btn-secondary"} onClick={this.btnLike_click}>
            <i className={this.state.liked ? "fas fa-heart" : "fas fa-heart-broken"}></i>
          </button>
          <i className={this.state.liked ? "fas fa-heart" : "fas fa-heart-broken"}></i>
      </div>
    );
  }
}

export default App;
2

Here’s my solution using the latest version of Fontawesome:

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeart as faHeartSolid } from "@fortawesome/free-solid-svg-icons";
import { faHeart as faHeartRegular } from "@fortawesome/free-regular-svg-icons";

const Like = (props) => {
  return (
    <FontAwesomeIcon
      onClick={() => props.onClick(props.movie)}
      icon={props.liked ? faHeartSolid : faHeartRegular}
      style={{ cursor: "pointer" }}
    />
  );
};

export default Like;