title: ReactJS: "this.props" is not a function when child component calls parent
body: <p>I have written this code and am currently wrangling with a bug in an onClick event. I have two events, the onClick event on the child element and the onChange event on the top-level parent element.</p>
  
  <p>The expected behaviour should be to change the activeAccount variable currently held in the Container component. To do this, I added an onClick handler on the AccountRow component that should then call the top-level parent's onChange function.</p>
  
  <p>However, the line</p>
  
  <pre><code>'this.props.onChange(this.props.account)',
  </code></pre>
  
  <p>in</p>
  
  <pre><code>handleClick: function(e) {
          this.props.onChange(this.props.account);
      },    
  </code></pre>
  
  <p>meant to call the parent function with parameter 'this.props.account',</p>
  
  <p>gives me this error:</p>
  
  <pre><code>Uncaught TypeError: this.props.onChange is not a function.
  </code></pre>
  
  <p>I initially thought that this was a scoping issue, but I have added</p>
  
  <pre><code>{...this.props}
  </code></pre>
  
  <p>on every child and nested child within the parent Container
  component. So, all props should have been propagated down to the AccountRow component. Nevertheless, the problem still remains.  </p>
  
  <pre><code>    var ACCOUNTS = [
      {name: 'cash on hand'},
      {name: 'savings account'},
      {name: 'shared account'},
      {name: 'my second wallet'}
  ];
  
  var TRANSACTIONS = [
      {date: '', name: 'Bananas', amount: 6, category: 'Groceries', account: 'cash on hand'},
      {date: '', name: 'Apples', amount: 2.50, category: 'Groceries', account: 'cash on hand'},
      {date: '', name: 'Cash withdrawal', amount: 250, account: 'savings account'}
  ];
  
  var AccountRow = React.createClass({
  
      handleClick: function(e) {
          this.props.onChange(this.props.account);
      },
  
      render: function () {
          return (
              &lt;li onClick = {this.handleClick}&gt; {this.props.account}&lt;/li&gt;
          )}
  });
  
  var AccountList = React.createClass({
  
      render: function () {
  
          var rows = [];
          this.props.accounts.map(function(each_account) {
              rows.push(
                  &lt;AccountRow 
                      account = {each_account.name} 
                      key = {each_account.name}
                      {...this.props}     
                  /&gt;);
                        })
      return (
          &lt;ul&gt;
          {rows}
          &lt;/ul&gt;
      )   
      }   
  });
  
  
  var NavBar = React.createClass({
  
      render: function () {
          return (
              &lt;div id = 'account-tabs'&gt;
                  &lt;h2&gt; Accounts &lt;/h2&gt;
                  &lt;AccountList 
                      accounts = {this.props.accounts} 
                      {...this.props} 
                  /&gt;
              &lt;/div&gt;
          )
      }
  });
  
  var TransactionRow = React.createClass({
      render: function (){
          var trans = this.props.transaction;
  
          return (
              &lt;tr&gt;
              &lt;td&gt;{trans.date}&lt;/td&gt;
              &lt;td&gt;{trans.name}&lt;/td&gt;
              &lt;td&gt;{trans.amount}&lt;/td&gt;
              &lt;td&gt;{trans.account}&lt;/td&gt;
              &lt;td&gt;&lt;a href = ''&gt;edit&lt;/a&gt;&lt;/td&gt;
              &lt;/tr&gt;
          )
      }
  });
  
  var TransactionList = React.createClass ({                      
      render: function () {
  
          var activeaccount = this.props.activeAccount;
  
          var rows = [];
          this.props.transactions.map(function(each_transaction) {
              if (each_transaction.account == activeaccount) {
  
                  /* Very strange behaviour
                  if (each_transaction account == this.props.activeAccount) 
                  DOES NOT WORK, I do not know why this is the case
                  */
  
                  rows.push(&lt;TransactionRow transaction = {each_transaction} key = {each_transaction.name} /&gt;);
              }
              else {
                  /*console.log(each_transaction.account);*/
              }     
          })
          return (
              &lt;tbody&gt;
              {rows}
              &lt;/tbody&gt;
          )
      }
  });
  
  var TransactionsTable = React.createClass({
      render: function() {
  
          return (
              &lt;div id = 'recent-transactions'&gt;
              &lt;h2&gt;Recent Transactions for {this.props.activeAccount}&lt;/h2&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;th&gt;date&lt;/th&gt;
                      &lt;th&gt;name&lt;/th&gt;
                      &lt;th&gt;amount&lt;/th&gt;
                      &lt;th&gt;account&lt;/th&gt;
                      &lt;th&gt;edit &lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;TransactionList 
                      transactions = {this.props.transactions}
                      activeAccount = {this.props.activeAccount}
              /&gt;
              &lt;/table&gt;
              &lt;/div&gt;
          )
      }
  });
  
  var TransactionForm = React.createClass({
      render: function() {
          return (
              &lt;div&gt;
              &lt;h2&gt;Add Transaction &lt;/h2&gt;
              &lt;p&gt;Transaction name&lt;/p&gt;
              &lt;input type = 'text' /&gt;
              &lt;p&gt;Price&lt;/p&gt;
              &lt;input type = 'number'/&gt;
              &lt;p&gt;Category (optional) &lt;/p&gt;
              &lt;input type = 'text' /&gt;
              &lt;/div&gt;
          )
      }
  });
  
  
  var ButtonMenu = React.createClass ({
      render: function () {
          return (
              &lt;div&gt;
              &lt;button&gt;Add Transaction&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  });
  
  var Container = React.createClass({
  
      getInitialState: function (){
          return {
              activeAccount: ACCOUNTS[0].name
          };
      },
  
      setActiveAccount: function(dat) {
          this.setState({
              activeAccount: dat  
          });
      },
  
      render: function () {
          return (
              &lt;div id = 'wrapper'&gt;
              &lt;NavBar 
                  accounts = {ACCOUNTS}
                  activeAccount = {this.state.activeAccount}
                  onChange = {this.setActiveAccount}
                  {...this.props}
              /&gt;
              &lt;TransactionsTable 
                  transactions = {TRANSACTIONS}
                  activeAccount = {this.state.activeAccount}
              /&gt;
              &lt;TransactionForm /&gt;
              &lt;ButtonMenu /&gt;
              &lt;/div&gt;
          );
      }
  });
  
  
  React.render(&lt;Container /&gt;, document.body);
  </code></pre>
  
  <p>Thank you for your time.</p>