Calling Event on Child Component in React

Question

I have a parent and child component relationship as defined below:

import React, { Component } from 'react';

export class TodoList extends Component {

  constructor(props) {
    super(props)

    this.state = {
      tasks : []
    }

    this.addTask = this.addTask.bind(this)
  }

  addTask() {

      let tasks = this.state.tasks
      let title = this.textInput.value

      tasks.push({title:title})
      this.state.tasks = tasks
      this.setState({
        tasks : tasks
      })

      console.log(this.state)
  }

  render()  {

    return (
      <div>
        <input type="text" ref={(input) => {this.textInput = input}}  />
        <button onClick={this.addTask}>Add New Task</button>

        <h6>Pending Tasks</h6>
        <PendingTaskList tasks = {this.state.tasks} />

      </div>
    )
  }
}

export class PendingTaskList extends Component {

  constructor(props) {
    super(props)

    this.markAsCompleted = this.markAsCompleted.bind(this)
  }

  markAsCompleted() {
    console.log("mark as completed")
  }

  render() {

    const listItems = this.props.tasks.map(function(task){
        return <div>
                  <input type="checkbox" onChange={this.markAsCompleted} />
                  <li>
                  {task.title}
                  </li>
                  <button>Remove</button>
               </div>
    })

    return (

          <ul>{listItems}</ul>
    )
  }

}

In the PendingTaskList component I want to invoke the markAsComplete event. How can I do that? When I run the above code I get the following error:

Cannot read property 'markAsCompleted' of undefined