title: React JS reference function in another component
body: <p>I'm trying to get a button rendered through another component to reference and/or influence the state of a different component.</p>
  
  <pre><code>var Inputs = React.createClass({
    getInitialState: function(){
      return {count: 1};
    },
    add: function(){
      this.setState({
        count: this.state.count + 1
      });
    },
    render: function(){
      var items = [];
      var inputs;
        for (var i = 0; i &lt; this.state.count; i++){
          items.push(&lt;input type="text" name={[i]} /&gt;);
          items.push(&lt;br /&gt;);
        }
      return (
        &lt;div className="col-md-9"&gt;
          &lt;form action="/" method="post" name="form1"&gt;
            {items}
            &lt;input type="submit" className="btn btn-success" value="Submit Form" /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
       );
     }
   });
  </code></pre>
  
  <p>I want to write a new component that will be able to access the add function in Inputs. I tried to reference it directly with <code>Inputs.add</code> like this:</p>
  
  <pre><code>var Add = React.createClass({
    render: function(){
      return (
        &lt;input type="button" className="btn" value="Add an Input" onClick={Inputs.add} /&gt;
      );
    }
  });
  </code></pre>
  
  <p>But that didn't work. How would I be able to access a component's functions through another component, or influence the state of a component through another component? Thanks.</p>