title: TypeError: this.props.* is not a function (even with binding)
body: <p>I keep getting the following error:</p>
  
  <blockquote>
    <p>TypeError: this.props.onDelete is not a function</p>
  </blockquote>
  
  <p>I have .bind(this) on the functions in render(), but this error seems to keep occurring and I don't know why. Here is the relevant code:</p>
  
  <p><strong>App.js</strong> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import Todos from './Components/Todos';
  
  class App extends Component {
  
    deleteTodo(id) {
      let todos = this.state.todos;
  
      for (let i = 0; i &lt; todos.length; i++) {
        if (todos[i].id === id) {
          todos.splice(i, 1);
          break;
        }
      }
  
      this.state.todos = todos;
    }
  
    render() {
  
  
      return (&lt;div className="App"&gt;
        &lt;h1&gt;React Todo App&lt;/h1&gt;
  
        &lt;AddTodo/&gt;
        &lt;Todos todos={this.state.todos} onDelete={this.deleteTodo.bind(this)}/&gt;
      &lt;/div&gt;);
    }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Todos.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import Todo from './Todo';
  
  class Todos extends Component {
  
    delete(id) {
      this.props.onDelete(id);
    }
  
    render() {
  
      let todoItems = '';
  
      if (this.props.todos) {
  
        todoItems = this.props.todos.map(todo =&gt; {
          return (&lt;Todo id={todo.id} name={todo.name})&gt;&lt;/Todo&gt;)
        });
      }
  
      return (&lt;ul class="todos" onDelete={this.props.onDelete.bind(this)}&gt;{todoItems}&lt;/ul&gt;);
    }
  }
  
  export default Todos;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Todo.js</strong>   </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react';
  
  class Todo extends Component {
  
    delete(id) {
      this.props.onDelete(id);
    }
  
    render() {
      return (&lt;li class="todo" id={this.props.id}&gt;{this.props.name}
        &lt;a onClick={this.delete.bind(this, this.props.id)} class='remove-button' href='#'&gt;X&lt;/a&gt;
      &lt;/li&gt;)
    }
  
  }
  
  export default Todo;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The error seems to be occurring at <strong>Todo.js</strong> in the following code snippet:</p>
  
  <pre><code>delete(id) {
      this.props.onDelete(id)    // Error
  }
  </code></pre>
  
  <p><strong>Edit:</strong> Added more code for context</p>