ReactJS directly accessing parent function onClick refers infinite loop
<p>Today I've started building with React, but some results are somehow unexpected. So I some explanation would be nice. I've got the following component:</p>

<pre><code>var QuestionItem = React.createClass({
    sendVote: function(e) {
        $(e.target).hasClass('up')
            ? this.props.onVoteUpdate(this.props.id, 'up')
            : this.props.onVoteUpdate(this.props.id, 'down');
    },


    render: function() {
        return (
            &lt;li data-up={this.props.up} data-down={this.props.down}&gt;
                &lt;div className="votes"&gt;
                    &lt;span className="up" onClick={this.sendVote}&gt;+&lt;/span&gt;
                    &lt;span className="down" onClick={this.sendVote}&gt;-&lt;/span&gt;
                &lt;/div&gt;
            &lt;/li&gt;
        );
    }
});
</code></pre>

<p>When I click on the span I want to trigger the <code>onVoteUpdate</code> function in my parent component, but why is it necessary to create an extra function called (in my case) <code>sendVote</code>?</p>

<p>Because when I directly execute the function <code>onClick</code> as shown below:</p>

<pre><code>&lt;div className="votes"&gt;
    &lt;span onClick={this.props.onVoteUpdate(this.props.id, 'up')}&gt;+&lt;/span&gt;
    &lt;span onClick={this.props.onVoteUpdate(this.props.id, 'down')}&gt;-&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>it ends up in a infinite loop of console logs. </p>

<pre><code>onVoteUpdate: function(question, state) {
    console.log(question);
    console.log(state);
});
</code></pre>

<p>Is this impossible, or am I doing something wrong?</p>