title: React - pass a variable to another component
body: <p>I have a parent-child relationship for a component I'm trying to setup. I would like to have the parent retain knowledge of the original state of a transaction (a React component) and then determine whether or not to allow the addition of new transactions based on whether or not it is less than that original amount. I do not know how to properly pass data from component to component on click call. My original component is listed below. Please send help!</p>
  
  <p>```</p>
  
  <pre><code>    var transaction = React.createClass({
        getInitialState: function(){
          return {
            transactions: [ { desc: '', val: 0 } ],
            initialTransaction: 10
          }
        },
        render: function(){
          return (
            &lt;div&gt;
             { this.state.transactions.map(this.renderChild) }
              &lt;button onClick={ this.newTransaction }&gt;Add&lt;/button&gt;
            &lt;/div&gt;
          )
        },
        shouldComponentUpdate: function(nextProps, nextState) {
          console.log(nextState.transactions);
          return nextState.transactions.reduce(function(a, b) {
            return { val: a.val + b.val}
          }) == this.state.initialTransaction
        },
        newTransaction: function(_transaction,x,y){
          this.state.transactions.push(_transaction);
  
          this.setState({
            transactions: this.state.transactions
          });
          this.forceUpdate();
        },
        renderChild: function(_transaction){
          return (
            &lt;div&gt;
            &lt;input type='text' defaultValue={ _transaction.desc } /&gt;
            &lt;input type='text' defaultValue={ _transaction.val }/&gt;
            // TODO: this button should pass a transaction up to the parent component
            &lt;/div&gt;
          );
        }
      });
     React.renderComponent(&lt;transaction /&gt;, document.getElementById('mount-point'));
  </code></pre>
  
  <p>```</p>