Switching font Awesome 5 icon with React

Question

I am trying to toggle the Font Awesome icon by clicking on a to-do item. Here is the whole component ...

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;

Here is my FA 5 CDN (directly from the site) ...

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

I took some screenshots of the React dev tool and inspector ...

Here the React component is incomplete (default)

And while ...

And two iconic elements in the inspector, I noticed that the one that is not used by default is commented out.

, React, . , , , . Codepen, , , CD 4.7.0. Codepen FA 4.7.0, , HTML, SVG.

, FA 5, !

Answer 1

-awesome javascript React rerender. svg/javascript , -awesome webfont css.

index.html fontawesome script CSS:

<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">

.

---

( , svg)

:

yarn add @fortawesome/fontawesome @fortawesome/react-fontawesome
yarn add @fortawesome/fontawesome-free-regular @fortawesome/fontawesome-free-solid

:

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCircle as fasCircle } from '@fortawesome/fontawesome-free-solid'
import { faCircle as farCircle } from '@fortawesome/fontawesome-free-regular'

const Circle = ({ filled, onClick }) => {

  return (
    <div onClick={onClick} >
      <FontAwesomeIcon icon={filled ? farCircle : fasCircle}/>
    </div>
  );
};

class App extends React.Component {
  state = { filled: false };

  handleClick = () => {
    this.setState({ filled: !this.state.filled });
  };

  render() {
    return <Circle filled={this.state.filled} onClick={this.handleClick} />;
  }
}

. github : https://github.com/FortAwesome/react-fontawesome

: Font Awesome 5 React?.

Answer 2

FA 5 svg- DOM, , , React virtual DOM. , - , , , , display: none. :

renderChatButton() {
  const unread = this.state.unread
  const normalIcon = <i className='far fa-comment' />
  const unreadIcon = <i className='fas fa-comment' />
  return (
    <div className='header-button' onClick={ this.toggleChat }>
      <span className={ unread ? 'hidden' : '' }>{ normalIcon }</span>
      <span className={ unread ? '' : 'hidden' }>{ unreadIcon }</span>
    </div>
  )
}

Answer 3

according to the discussion above this is probably a true mistake, not a reaction