title: React: Unable to access the parent component's function which is passed as prop to child component
body: <p>I have a TodoList component which is a child of the App component. I wish to change the state of the App component's todos list. I am attempting to pass a toggleComplete function from the TodoList component to the Todo component so at onClick event it would fire and work its way up to the App component so I could update the state.</p>
  
  <p>I get a "Uncaught TypeError: Cannot read property 'toggleComplete' of undefined" in the TodoList.js</p>
  
  <p>~/src/component/Todo.js</p>
  
  <pre><code>import React, {PropTypes} from 'react';
  
  export default class Todo extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;li className={this.props.todo.done ? 'completed' : 'view'}&gt;
          &lt;div className="view"&gt;
            &lt;input onClick={this.props.toggleComplete(this.props.id)} className="toggle" type="checkbox" checked={this.props.todo.done} /&gt;
            &lt;label&gt;{this.props.id}: {this.props.todo.title}&lt;/label&gt;
            &lt;button className="destroy"&gt;&lt;/button&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      );
    }
  }
  </code></pre>
  
  <p>~/src/component/TodoList.js</p>
  
  <pre><code>import React, {PropTypes} from 'react';
  import Todo from './Todo'
  
  export default class TodoList extends React.Component {
    constructor(props) {
      super(props);
    }
    toggleComplete(todoID){
      console.log('hit toggleComplete TodoList');
    }
  
    render() {
      return (
        &lt;section className="main"&gt;
          &lt;ul className="todo-list"&gt;
            {this.props.todos.map(function(todo, index){
              return &lt;Todo todo={todo} toggleComplete={this.toggleComplete} id={index + 1} key={index+1}/&gt;;
            })}
          &lt;/ul&gt;
        &lt;/section&gt;
      );
    }
  }
  </code></pre>
  
  <p>~/src/App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import Header from './component/Header'
  import TodoList from './component/TodoList'
  import TodoFooter from './component/TodoFooter'
  import Footer from './component/Footer'
  
  export default class App extends Component {
    constructor(){
      super();
      this.state = {
        todos: [
          {title: 'Taste JavaScript', done: true},
          {title: 'Buy Unicorn', done: false},
          {title: 'eat all day', done: false},
          {title: 'sleep all night', done: true}
        ]
      }
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;section className="todoapp"&gt;
            &lt;Header /&gt;
            &lt;TodoList todos={this.state.todos} /&gt;
            &lt;TodoFooter /&gt;
          &lt;/section&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>