title: Cannot read property 'handleChange' of undefined
body: <p>I'm new to react. I'm getting error above. What am I doing wrong?<br></p>
  <p>Here's my code:</p>
  <pre><code>import React from &quot;react&quot;
  import ReactDOM from &quot;react-dom&quot;
  import toDoLists from &quot;./components/Array&quot;
  
  
  class Main extends React.Component {
      render(){
          return (
          &lt;p&gt;
              &lt;input type=&quot;checkbox&quot; checked={this.props.completed} onChange={function(props){
                  this.props.handleChange(this.props.id)
              }}
              /&gt;
              {this.props.task}
          &lt;/p&gt;
          )
      }
  }
  
  class App extends React.Component {
      constructor(){
          super()
          this.state ={
              todos: toDoLists
          }
          this.handleChange = this.handleChange.bind(this);
      }
      handleChange(id) {
          console.log(&quot;Changed&quot;, id)
      }
      render() {
          const todoItems = this.state.todos.map(function(item){
              return(
                  &lt;Main
                      key={item.id} task={item.task} completed={item.completed} id={item.id}
                      handleChange={this.handleChange}
                  /&gt;
                  )
              
              })
          return (
              &lt;div className=&quot;col-md-4 bg-dark container mt-5 p-3&quot;&gt;
                  {todoItems}
              &lt;/div&gt;
              
          )
      }
  }
  
  ReactDOM.render(
      &lt;App/&gt;, document.getElementById(&quot;root&quot;)
  )
  </code></pre>