title: How to call two functions onClick in React when one of the uses properties from a component
body: <p>I have an array that I am sorted and I would like to change the css class of the arrow to indicate the current sorting. I have functions for both changing the class and also sorting the array but I cannot combine them onClick because one cannot be written exclusively as a functions. How can I combine these? Here is the relevant code: </p>
  
  <p>The component</p>
  
  <pre><code>var Clickable = React.createClass ({
  
  handleClick: function() {
      this.props.onClick(this.props.index);
  },
  
  render: function () {
      return &lt;img className={this.props.isActive ? 'currentArrow' : 'arrow'}      onClick={this.handleClick}
                  src={this.props.src} /&gt;
  }
  });
  </code></pre>
  
  <p>The container</p>
  
  <pre><code>  var LeaderBoard = React.createClass({
  
  getInitialState: function() {
      this.state = {
          activeIndex: null
      };
      return {
          data: loading,
      };
  },
  
  handleClick: function(index) {
      this.setState({activeIndex: index});
  },
  
  componentWillMount: function() {
      fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent', {
          method: 'get'
      }).then(response =&gt; response.json()).then(data =&gt; {
          this.setState({
              data: data,
          });
      }).catch(function(error) {
          console.log("error is ", error);
      });
  },
  
  render: function() {
      return (
          &lt;div&gt;
              &lt;div id="Title" className="row"&gt;
                  &lt;h1&gt;freeCodeCamp Leaderboard&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div className="row"&gt;
                  &lt;div className="col-md-1 col-xs-1"&gt;
                      &lt;h4&gt;#&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div className="col-md-3 col-xs-3"&gt;
                      &lt;h4&gt;Camper Name
                          &lt;Clickable index={0} isActive={this.state.activeIndex===0}
   ////Second function works but the class is not changed
                          onClick={() =&gt; {this.handleClick; this.setState(this.state.data.sort(sortDescending("recent")))}}
                          src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png"/&gt;
                          &lt;Clickable index={1} isActive={this.state.activeIndex===1}
    ///class is changed but I cannot add the sorting function
                          onClick ={this.handleClick}
                          src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png"/&gt;
                      &lt;/h4&gt;
                  &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;{information}&lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  });
  
  
  ReactDOM.render(&lt;LeaderBoard /&gt;, document.getElementById('theBoard'));
  </code></pre>
  
  <p>I realized its a lot of code but I tried to take out the part that's not pertinent. </p>