React click handler function is working after 2 clicks
<p>I'm working on the "Camper's Leaderboard" challenge from FreeCodeCamp. So there's such thing that I have to implement: <strong>"I can toggle between sorting the list by how many brownie points they've earned in the past 30 days and by how many brownie points they've earned total."</strong><br>
 I added onclick handler to the list's header cells, but it changes a view after two clicks on the element instead of one. In a few words:<br>
<strong>_handlerAll() and _handler30()  are executed after two clicks in a row, not one.</strong>
Here is the code:  </p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>"use strict";
class TableBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            sortAllTime: true
        };
    }

    loadCampersFromServer() {
        let templateURL = 'https://fcctop100.herokuapp.com/api/fccusers/top/';
        let url = (this.state.sortAllTime) ? (templateURL + 'alltime') : (templateURL + 'recent');
        fetch(url)
            .then(
                (response) =&gt; {
                    if (response.status !== 200) {
                        console.log('Looks like there was a problem. Status Code: ${response.status}');
                        return;
                    }
                    response.json().then((data) =&gt; {
                        this.setState({data: data});

                    })
                }
            )
            .catch(function (err) {
                console.log('Fetch Error :-S', err);
            });
    }

    _handlerAll() {
        this.setState({sortAllTime: true});
        this.loadCampersFromServer();
        console.log('all');
    }

    _handler30() {
        this.setState({sortAllTime: false});
        this.loadCampersFromServer();
        console.log('notAll');
    }

    componentDidMount() {
        this.loadCampersFromServer();
    }

    render() {
        return &lt;CampersList _data={this.state.data}
        _handlerAll={this._handlerAll.bind(this)} _handler30={this._handler30.bind(this)}/&gt;;
    }
}

class CampersList extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let campersNodes = this.props._data.map((element, index) =&gt; {
            return (
                &lt;Camper user={element} index={index}/&gt;

            );
        });

        return (
            &lt;table&gt;
                &lt;tr&gt;
                    &lt;th&gt;#&lt;/th&gt;
                    &lt;th&gt;Camper's Name&lt;/th&gt;
                    &lt;th onClick={this.props._handler30}&gt;Points in past 30 days&lt;/th&gt;
                    &lt;th onClick={this.props._handlerAll}&gt;All time points&lt;/th&gt;
                &lt;/tr&gt;
                {campersNodes}
            &lt;/table&gt;
        )
    }
}

class Camper extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            &lt;tr&gt;
                &lt;td&gt;{this.props.index + 1}&lt;/td&gt;
                &lt;td&gt;
                    &lt;img src={this.props.user.img} alt="logo"/&gt;
                    &lt;span&gt;{this.props.user.username}&lt;/span&gt;
                &lt;/td&gt;
                &lt;td&gt;{this.props.user.recent}&lt;/td&gt;
                &lt;td&gt;{this.props.user.alltime}&lt;/td&gt;
            &lt;/tr&gt;
        )
    }
}

ReactDOM.render(&lt;TableBox /&gt;, document.getElementById('root'));</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div#root {
  margin: 0 auto;
  width: 50%; }

img {
  width: 32px; }

span {
  padding: 20px 5px; }

table {
  font-family: 'Arial';
  margin: 25px auto;
  border-collapse: collapse;
  border: 1px solid #eee;
  border-bottom: 2px solid #ccc0b8;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05); }
  table tr:hover {
    background: #f4f4f4; }
    table tr:hover td {
      color: #555; }
  table tr th, table tr td {
    color: #999;
    border: 1px solid #eee;
    padding: 12px 35px;
    border-collapse: collapse; }
  table tr th {
    background: #619d9f;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px; }
    table tr th.last {
      border-right: none; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
&lt;div id="root"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>