Estoy tratando de alternar un icono de Font Awesome haciendo clic en un elemento de la lista de tareas. Aquí está el componente completo ...

import React from 'react';

import './TodoItem.scss';

class TodoItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      complete: false
    }
    this.toggleComplete = this.toggleComplete.bind(this);
  }

  toggleComplete() {
    this.setState(prevState => ({
      complete: !prevState.complete
    }));
  }

  render() {
    const incompleteIcon = <span className="far fa-circle todo-item-icon"></span>;
    const completeIcon = <span className="far fa-check-circle todo-item-icon"></span>;

    return (
      <div className="todo-item" onClick={this.toggleComplete}>
        {this.state.complete ? completeIcon : incompleteIcon}
        <span className="todo-item-text">{this.props.item}</span>
      </div>
    );
  }
}

export default TodoItem;

Aquí está mi FA 5 CDN (directamente desde el sitio web) ...

<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

He tomado algunas capturas de pantalla de la herramienta de desarrollo e inspector React ...

Aquí está el componente Reaccionar mientras está incompleto (el valor predeterminado)

Y mientras completa ...

Y los dos elementos de ícono en el inspector, noté que el que no se usa por defecto está comentado.

Como puede ver, puedo alternar manualmente el estado completo y los cambios de componentes en la herramienta Reaccionar, pero el cambio no se procesa. Cambié el estado predeterminado para asegurarme de que ambos íconos estén cargados correctamente y lo estén. Hice unaCodepen probarlo en un entorno diferente y estefunciona, pero Estoy usando el FA 4.7.0 CDN. Con Codepen y FA 4.7.0, cuando inspecciono el icono, es solo un elemento HTML, no SVG.

¡Me gustaría que este componente funcione con FA 5 para agradecer cualquier ayuda!