title: React - props is not a function
body: <p>Yet another one of these questions. I know there are several here, but I can't see my mistake.</p>
  <p>My code is based on &quot;create-react-app&quot; via Visual Studio 2019, so the boilerplate should look familiar.</p>
  <p>I'm passing a <em>function</em> called &quot;<strong>updateTodoCheckbox</strong>&quot; from the parent <strong>FetchData</strong> component to my <strong>TodoItem</strong> component via a <em>property</em> called &quot;<strong>onCheckboxUpdate</strong>.</p>
  <p>When <em>handleInputChange</em> is called via the <em>onChange</em> for the checkbox (which has the name property <em>isComplete</em>), I get:</p>
  <blockquote>
  <p>TypeError: this.props.onCheckboxUpdate is not a function</p>
  </blockquote>
  <p>I have called bind on the function in the constructor. I've also tried passing it as an arrow function. Same result, so I don't think it's a binding issue.</p>
  <p>Any help appreciated to see my error. I'm sure it's a simple one.</p>
  <pre><code>import React, { Component } from 'react';
  
  export class TodoItem extends Component {
    constructor(props) {
      super(props);
      this.state = {
        isComplete: props.data.isComplete
      }
  
      this.handleInputChange = this.handleInputChange.bind(this); // otherwise this.setState will be undefined
  
    }
  
      handleInputChange(inputEvent) {
  
        const target = inputEvent.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
  
        if (name == &quot;isComplete&quot;)
        {
          this.props.onCheckboxUpdate(); // This fails        
        }
  
        this.setState({
         [name]: value 
        });
  
    }
  
    render() {
      return (
        &lt;div class=&quot;form-group&quot; key={this.props.data.id}&gt;
            &lt;div className=&quot;form-check&quot;&gt;
              &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; name=&quot;isComplete&quot; checked={this.state.isComplete} id={this.props.data.id} onChange={this.handleInputChange}/&gt;
              &lt;label class=&quot;form-check-label&quot; for={this.props.data.id}&gt;{this.props.data.name} - {this.props.data.categoryId}&lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export class FetchData extends Component {
    static displayName = FetchData.name;
  
    constructor(props) {
      super(props);
      this.state = { todoData: [], loading: true };
  
      this.updateTodoCheckbox = this.updateTodoCheckbox.bind(this);
  
    }
  
    componentDidMount() {
      this.populateTodoData();
    }
  
    static renderTodoData(todoData) {
        return (
          &lt;form&gt;
              {todoData.map(todo =&gt;
                  &lt;TodoItem data={todo}
                    onCheckboxUpdate={this.updateTodoCheckbox} /&gt;
              )}
          &lt;/form&gt;        
      );
    }
  
    render() {
      let contents = this.state.loading
        ? &lt;p&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
        : FetchData.renderTodoData(this.state.todoData);
  
      return (
        &lt;div&gt;
          &lt;h1 id=&quot;tabelLabel&quot; &gt;TODO&lt;/h1&gt;
          &lt;p&gt;A list of things to do&lt;/p&gt;
          {contents}
        &lt;/div&gt;
      );
    }
  
    async populateTodoData() {
      const response = await fetch('api/TodoItems');
      const data = await response.json();
      this.setState({ todoData: data, loading: false });
    }
  
    async updateTodoCheckbox() {
      
      console.log(test);
      // some await call will go here
    }
  }
  </code></pre>