根据菜单可见性更改菜单按钮（菜单状态）

Question

我一直在关注本教程：https://www.kirupa.com/react/smooth_sliding_menu_react_motion.htm

我有菜单工作的功能 - 它基于点击我的按钮滑入和滑出，但按钮的面不会改变。我正在使用FontAwesome，尝试在菜单不可见时从fas fa-bars fa-2x切换到可见的fas fa-times fa-2x。我不知道为什么图标没有随着点击而改变。

在下面的代码中，我在封闭的“打开/关闭”按钮div中添加了一个字符，它们按预期交替显示，因此我知道状态正在发生变化并且正在受到监控。但为什么fontAwesome内容也不会改变呢？

import React, { Component } from 'react'; 
import { Link } from 'react-router-dom';
import Social from '../Elements/Social';
import Menu from './Menu';


export default class Navigation extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      visible: false,
    }

    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.toggleMenu = this.toggleMenu.bind(this);

  }

  handleMouseDown(e) {
    this.toggleMenu();

    console.log("clicked");
    e.stopPropagation();
  }

  toggleMenu() {
    this.setState({
      visible: !this.state.visible
    });
  }


  render() {
    return(
      <div className="site-nav--cntr">
        <div className="site-nav--btns">
          <Link className="site-nav-btn--cntr" to={"/"}>
            <div className="site-nav--btn site-nav-logo">VR</div>
          </Link>

          <div className="site-nav--btn site-nav-trigger open"
            onMouseDown={this.handleMouseDown}
            menuVisibility={this.state.visible}
            >

            {
              (!this.state.visible) ?
                (<div className="hello"><i className="fas fa-bars fa-2x"></i>h</div>
                ) :
                (<div className="goodbye"><i className="fas fa-times fa-2x"></i>g</div>)
            }


          </div>

        </div>

        <Menu
          handleMouseDown={this.handleMouseDown}
          menuVisibility={this.state.visible} />

      </div>
    )
  }
}