TypeError: this.props.delItemRow is not a function for deleting item

Question

I have put in my whole day tried every method but to vain my efforts. I am learning React how to make work a delete functionality but then to vain . A simple TO-DO list where the delete is not working. I dont know where i'm doing wrong.

Here are the js files: display and addList, which is parent to display. Using props the parent function is not being called.

display.js

      class DisplayList extends Component{   
  delRow(en){
    this.props.delItemRow(en);
  } 
render(){
return(

//  console.log("check"+this.props.list),
    <div>
    <h4>DisplayList</h4>
     <ul>
        {this.props.list.map((item)=>(<li key={item}>{item} <button  onClick={this.delRow.bind(this,item)}>D</button> </li>))}
     </ul>
    </div>
    );} }

  export default DisplayList;

addlist.js

 class AdList extends Component{
constructor(props){
  super(props);
  this.state={value:'',disArrList:[]}
  this.handleChange=this.handleChange.bind(this);
  this.handleSubmit=this.handleSubmit.bind(this);
  this.delItemRow=this.delItemRow.bind(this);
  this.updateItemRow=this.updateItemRow.bind(this);
}
    delItemRow(itemName)
{this.setState({disArrList:this.state.disArrList.filter(e1=>e1!==itemName)};
}
handleChange(e){
    this.setState({value:e.target.value});
}
handleSubmit(e){
    e.preventDefault();
    //alert("submit"+this.state.value);
    let mycolletion=this.state.disArrList.concat(this.state.value);
    this.setState({disArrList:mycolletion});
}    
   render(){
    return(
        <div>
            <div className="Todo">
                <form onSubmit={this.handleSubmit}>
                    <input type="text" value={this.state.value} onChange={this.handleChange}/>
                    <input type="submit" value="Add" />
                </form>
            </div>
            <div>
               <DisplayList  list={this.state.disArrList} removeItem={this.delItemRow} updateItem={this.updateItemRow}/>
            </div>
        </div>
        );}} 
    export default AdList;

Thank you any help would be appreciated

Answer 1

The prop you are passing is called removeItem, so you have to change it in your snippet.

display.js

delRow(en){
  this.props.removeItem(en);
}

render(){
  return(
    <div>
      <ul>
       {this.props.list.map((item)=>(<li key={item}>{item} <button  onClick={this.delRow.bind(this,item)}>D</button> </li>))}
      </ul>
    </div>
  );
}