Call multiple functions in React, one inside and another outside a component?
<p>I have a trigger that is supposed to change a state of its child component. The results of both render statements are inconsequential. My only concern here is that I am unsure how to use the <code>trigger</code> trigger to call the <code>leftbehind</code> function without putting <code>leftbehind</code> inside its parent render <code>Another</code>. </p>

<p>My code is below. The goal is to have <code>leftbehind</code> run without having to put it inside the render.  </p>

<pre><code>var Another = React.createClass({
  leftbehind: function() {
    if (this.props.status === "dare") {
      alert('Winning!');
    }
  },
  render: function() {
    if (this.props.status === "truth") {
      return (&lt;p&gt;Yes&lt;/p&gt;);
    } else {
      return (&lt;p&gt;Nope&lt;/p&gt;);
    }
  }
});

var App = React.createClass({
  getInitialState:function() {
    return {deesfault: "truth"};
  },
  trigger: function() {
    this.setState({deesfault: "dare"});
  },
  render: function() {
    return (
      &lt;div&gt; 
        &lt;p onClick={this.trigger}&gt;{this.state.deesfault}&lt;/p&gt;
        &lt;Another status={this.state.deesfault}/&gt;
      &lt;/div&gt;
    );
  }
});
</code></pre>

<p>The reason I do not want to place <code>leftbehind</code> inside the render, is because it is technically supposed to take the place of an API call. And I do not want that to be called inside the render function. </p>