title: Toggle Icon on Button click React
body: <p>I am trying to toggle the button icon when clicked in React app. I looked into the console, the value of "togglePassword" is changing on click but the button icon is not changing... How to correct this out?
  Here is my code...</p>
  
  <pre><code>class Register extends Component {
  
      constructor() {
          super();
          this.state = {
              togglePassword: false
          };
  
          this.onToggle = this.onToggle.bind(this);
      }
  
      onToggle(e) {
        this.setState({ togglePassword: !this.state.togglePassword })
      }
  
      render() {
         return (
            &lt;button onClick={this.onToggle} type="button"&gt;
               {
                this.state.togglePassword ? 
                &lt;i className="fas fa-eye-slash"&gt;&lt;/i&gt; : 
                &lt;i className="fas fa-eye"&gt;&lt;/i&gt;
               }
            &lt;/button&gt;
         );
      }
  }
  </code></pre>
  
  <p>The other method I tried is as below but the console gave me the following error when I clicked the button...</p>
  
  <pre><code>&lt;button onClick={this.onToggle} type="button"&gt;
             {
              this.state.togglePassword &amp;&amp;
              (&lt;i className="fas fa-eye-slash"&gt;&lt;/i&gt;)
             }
             {
              !this.state.togglePassword &amp;&amp;
              (&lt;i className="fas fa-eye"&gt;&lt;/i&gt;)
             }        
  &lt;/button&gt;
  </code></pre>
  
  <p>Error: failed to execute "remove child" on "Node". The node to be removed is not a child of this node.</p>