状態が更新されたときにFontAwesomeIconを変更します（React.JS）

Question

アプリケーションからスライドするサイドバーを追加しました。サイドバーのボタンをAアイコンからBアイコンにスライドさせて、サイドバーのボタンを変更したい私が理解できないことは、Fontawesomeコードの状態をどのように変更できるかということです。

私は私のコードの一部が怒鳴るようです

（<i className="fa fa-share fa-2x" aria-hidden="true"></i>）Bアイコンにアイコン（<i className=" fa fa- reply fa-2x" aria-hidden="true"></i>）を変更したいです。

class Category extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     isOpen: false 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState({ 
     isOpen: !this.state.isOpen 
    }) 
    console.log(!this.state.isOpen) 
    } 
    render() { 
    const categoryStatus = this.state.isOpen ? "isopen" : ""; 
    const categoryContainer = this.state.isOpen ? "isopen" : ""; 
    return (
     <div> 
     <div className="categoryContainer"> 
      <div className={categoryContainer}> 
      <h3 >CATEGORIES</h3> 
      </div> 
      <button onClick={this.handleClick}> 
      <i className="slideinButton fa fa-reply fa-2x" aria-hidden="true"></i> 
      </button> 
     </div> 
     <div className={categoryStatus} id="category"> 
      <input className="categoryInput" type="text" value="Add Category" placeholder="Add Category" /> 
      <ul> 
      <li>Greetings</li> 
      <li>Main Switchboard</li> 
      <li>Interjections</li> 
      </ul> 
     </div> 
     </div> 
    ) 
    } 
} 

Answer 1

スライダーを制御する状態変数が既にあるので、それを使用して表示するアイコンを決定できます。あなたはこの読みやすくを見つけた場合、代わりに

<button onClick={this.handleClick}> 
    <i className={"slideinButton fa fa-" + (this.state.isOpen ? "share" : "reply") + " fa-2x"} aria-hidden="true"></i> 
</button> 

：ちょうどその状態に応じて適切なものを返す条件を追加するには、categoryStatusとcategoryContainerのためにしたよう

<button onClick={this.handleClick}> 
    {this.state.isOpen 
    ? <i className="slideinButton fa fa-share fa-2x" aria-hidden="true"></i> 
    : <i className="slideinButton fa fa-reply fa-2x" aria-hidden="true"></i> 
    } 
</button> 

Answer 2

あなたが同じことを行うことができます。

const icon = this.state.isOpen ? 'reply' : 'share' 

<button onClick={this.handleClick}> 
    <i className={`slideinButton fa fa-${icon} fa-2x`} aria-hidden="true" /> 
</button> 

さらに良いアプローチは、あなたがそれにicon小道具を送信することができIconコンポーネントを作成することです（reply、shareなど...）ので、あなたのコードの別の場所で同じアイコンコンポーネントを再利用することができます。あなたはそれでより少ないコードを書くことは言うまでもありません。