CODEWITHSUNDEEP
javascriptgitreactjs
Sajin M Aboobakkar
Sajin M Aboobakkar

Reputation: 4229

Uncaught TypeError: this.props.onDelete is not a function reactjs

The problem occurs when i'm trying to delete a to do list,onDelete is not a function.Full code is here in the git.Thanks

var TodoList = React.createClass({
    onDelete : function(key){
        console.log('remove here');
    },
    render: function() {
        var createItem = function(itemText,i) {
            return (
                <TodoListItem onDelete={this.remove} index={i} key=
                    {i}>{itemText}
                </TodoListItem>
            );
        };

        return(
            <ul id="staggered-test" className="collection with-
            header">
                <li className="collection-header">
                    <h4>todo list</h4>
                    {this.props.items.map(createItem)}
                </li>
            </ul>
      )
   }
});




var TodoListItem = React.createClass({
    remove : function(key){
        console.log('test:',key);
        console.log('that.props',this);
        this.props.onDelete();
    },
    render : function(){
        return(
            <li className="collection-item">
                <div>{this.props.children}
                    <a onClick=
                    {this.remove.bind(this,this.props.index)} href="#" className="secondary-content"><i className="material-icons">delete</i>
                    </a>
                </div>
            </li>
        )
    }
});

Upvotes: 4

Views: 12931

Answers (3)

Sajin M Aboobakkar
Sajin M Aboobakkar

Reputation: 4229

The change made is {this.props.items.map(createItem)} to {this.props.items.map(createItem,this)}

var TodoList = React.createClass({
    remove : function(index){
        console.log('remove from here:',this.props.items);
        console.log('index:',index);
    },
    render: function() {
        var createItem = function(itemText,i) {
            return (
                <TodoListItem onDelete={this.remove.bind(this,i)} index={i} key={i}>{itemText}
                </TodoListItem>
            );
        };
        return(
            <ul id="staggered-test" className="collection 
                with-header">
                <li className="collection-header">
                    <h4>todo list</h4>
                    {this.props.items.map(createItem,this)}
                </li>
            </ul>
        )
    }
});

The is no need of the function remove in the class TodoListItem,because the parent has the function so that it can passed through props.

var TodoListItem = React.createClass({
    render : function(){
        return(
            <li className="collection-item">
                <div>{this.props.children}
                    <a onClick={this.props.onDelete} href="#" 
                    className="secondary-content">
                        <i className="material-icons">delete</i>
                    </a>
                </div>
            </li>
        )
    }
});

Upvotes: 1

Karups
Karups

Reputation: 207

Problem comes from this line

onDelete={this.remove}

Change to

onDelete={this.onDelete}

Upvotes: 2

Grace Huang
Grace Huang

Reputation: 5709

The problem comes from the line

onDelete={this.remove}

This remove function is not defined. Is there anything your wnat to do in onDelete? If not, you can remove this.props.onDelete();

Upvotes: 3

Related Questions