title: Toggle arrow using react
body: <p>I am trying to toggle an arrow using React. found some examples online, but still not able to make it work.</p>
  
  <p>this is what I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Footer extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        active: false,
      };
    }
  
    handleClick() {
      const currentState = this.state.active;
      this.setState({
        active: !currentState
      })
    }
    
  
  render() {
      return (
          &lt;footer className="footer"&gt;
            &lt;section className="container"&gt;
              &lt;a className="visible-xs" role="button"&gt;
                         Social
                &lt;i onClick={this.handleClick} className={this.state.active ? "fa fa-chevron-up" : "fa fa-chevron-down"} aria-hidden="true"&gt;&lt;/i&gt;
               &lt;/a&gt;
            &lt;/section&gt;
           &lt;/footer&gt;
      )
    }
  }
           
  module.exports = Footer;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  
    </code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be appreciated.</p>