I am trying to toggle a Font Awesome icon by clicking on a to-do list item. Here is the entire 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's my FA 5 CDN (straight from the website)...
<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
I've taken a few screenshots of the React dev tool and inspector...
Here is the React component while incomplete (the default)
And the two icon elements in the inspector, I noticed the one not being used by default is commented out.
As you can see, I'm able to manually toggle the complete state and the component changes in the React tool but the change is not rendered. I changed the default state to make sure both icons are loaded correctly and they are. I made a Codepen to try it in a different environment and this one works, but I am using the FA 4.7.0 CDN. With the Codepen and FA 4.7.0, when I inspect the icon, it is just an HTML element not SVG.
I'd like to get this component working with FA 5 so any help would be appreciated!