title: How to apply animation on onClick event in React
body: <p>I want to create add to favorites button with <a href="https://zamarrowski.github.io/react-ionicons/" rel="nofollow noreferrer">IonIcons</a> library. I put the <code>icon name</code> and the <code>animation state</code> in the React state.</p>
  
  <p>Then I want to change those with <code>onClick</code> function. But for some reason animation doesn't work. It is nothing special, just true or false.</p>
  
  <p>The state is correct. If I console log it:</p>
  
  <ul>
  <li>Before click : <code>{icon: "md-heart-outline", iconAnimation: false}</code></li>
  <li>After click: <code>{icon: "md-heart", iconAnimation: true}</code></li>
  </ul>
  
  <p>But the animation <strong>isn't</strong> applied. The icon changes and that is fine but the animation doesn't work.</p>
  
  <p>My code is as follows:</p>
  
  <p>State:</p>
  
  <pre><code>constructor(props){
          super(props);
  
          this.state = {             
              icon: "md-heart-outline",
              iconAnimation: false
          }
      }
  </code></pre>
  
  <p>In render function I have an <code>IonIcon</code> component as follows:</p>
  
  <pre><code>render(){
      return (
          &lt;Ionicon
               icon={this.state.icon}
               fontSize="30px"
               color="red"
               beat={this.state.iconAnimation}
               onClick={this.handleFavorites.bind(this, vehicle, favorites)}
               style={{cursor: "pointer"}}
          /&gt;
      )
  }
  </code></pre>
  
  <p>And function <code>handleFavorites</code> is as follows:</p>
  
  <pre><code>handleFavorites(vehicle, favorites, event){
      this.setState({icon: "md-heart", iconAnimation: true});
  }
  </code></pre>