Не могу передать функцию в дочерний компонент как параметр в React js

class Task extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      edit: false,
    }
  }
  rendNorm = ()=>{
    return(
      <div>
        <div className="box">
          <div className="text">{this.props.children}</div>
          <button onClick={this.edit} className="btn light">Edit</button>
          <button onClick={this.remove} className="btn red">Delete</button>
        </div>
      </div>
    );
  }
  rendEdit = ()=>{
    return(
      <div>
        <div className="box">
          <textarea ref="areaVal" defaultValue={this.componentName}></textarea>
          <button onClick={this.save} className="btn success">Save</button>
        </div>
      </div>
    );
  }
  render(){
    if(this.state.edit){
      return this.rendEdit();
    }
    else{
      return this.rendNorm();
    }
  }
    // custom methods
  edit = ()=>{
    this.setState(()=>({edit: true}));
  }
  save = ()=>{
    this.setState(()=>({edit: false}));
    this.props.update(this.refs.areaVal.value, this.props.index)
  }
  deleteBlock = ()=>{
    this.props.deleteBlock(this.props.index);
  }
}

class MainComponent extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      taskArray: ['task1','task2','task3']
    }
  }
  //custom methods
  deleteBlock(i){
    var arr = this.state.taskArray;
    arr.splice(i,1);
    this.setState(()=>({taskArray: arr}));
  }
  updateText(text,i){
    var arr = this.state.taskArray;
    arr[i] = text;
    this.setState({tasks: arr});
  }
  render(){
    return(
      <div className="field">
        {
          this.state.taskArray.map(function(item,index){
            return (<Task key={index} index={index} update={this.updateText} deleteBlock={this.deleteBlock} >{item}</Task>);
          })
        }
      </div>
    );
  }
}

const app = document.getElementById("example");
 ReactDOM.render (<MainComponent/>, app);