title: ReactJs How to change an icon of a button on the click event?
body: <p>I am using the <code>IconButton</code> from <a href="http://www.material-ui.com/#/components/icon-button" rel="nofollow noreferrer">material-ui</a> and I want to change the icon of the button after the click/touch event.</p>
  <pre><code>var tableModeElement =
  &lt;IconButton key=&quot;tableModeButton&quot; 
   onTouchTap={() =&gt; { 
     this.setState(prevState =&gt; (
      { isCardView: !prevState.isCardView })) } }&gt;
    &lt;i className=&quot;material-icons theme-color-p1&quot;&gt;
     {this.state.isCardView ? &quot;view_module&quot; : &quot;list&quot;}
    &lt;/i&gt;
  &lt;/IconButton&gt;
  </code></pre>
  <p>The expression <code>{this.state.isCardView ? &quot;view_module&quot; : &quot;list&quot;}</code> is only evaluated once and no more after that. I thought if I change the state I will force a re-render? What am I doing wrong?</p>
  <p>EDIT: added that the iconButton is assigned to a variable. If I include the <code>&lt;IconButton&gt;</code> directly into the render method it works fine. I had to re-assign the variable to make it work.</p>