I'm trying out an example in reactJS where I'm displaying a list of records and delete them.Refresh the list after each delete. I saw many questions raised by this error heading, but nothing worked with me.

var CommentBox = React.createClass({
        loadCommentsFromServer: function () {
            $.ajax({
                url: this.props.listUrl,
                dataType: 'json',
                success: function (data) {
                    this.setState({data: data});
                }.bind(this),
                error: function (xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this),
                cache: false
            });
        },
        getInitialState: function () {
            return {data: []};
        },
        ponentDidMount: function () {
            this.loadCommentsFromServer();
        },
        onClickingDelete: function() {
            alert('Upper layer on click delete called');
            this.loadCommentsFromServer();
        },
        render: function () {
            return (
                    <div className="mentBox">
                        <h1>Static web page</h1>
                        <CommentList data={this.state.data} onClickingDelete={this.onClickingDelete}  />


                    </div>
            );
        }
    });


    var CommentList = React.createClass({
        render: function() {
            if (this.props.data != '') {
                var mentNodes = this.props.data.content.map(function (ment) {

                    return (
                            <div className="ment" key={ment.id}>
                                <h2 className="mentpageName">
                                    {ment.pageName}
                                </h2>

                                <p> {ment.pageContent} </p>

                                <DeleteButton deleteUrl={'/delete/' + ment.id} onClickingDelete={this.props.onClickingDelete}/>

                            </div>
                    );
                });
            }
            return (
                <div className="mentList">
                    {mentNodes}
                </div>
            );
        }
    });

    var DeleteButton = React.createClass({
        onClickingDelete: function() {
            $.ajax({
                url: this.props.deleteUrl,
                type: 'delete',
                success: function () {
                    alert('Successfully deleted');
                    this.props.onClickingDelete();
                }.bind(this),
                error: function (xhr, status, err) {
                   console.error(this.props.deleteUrl, status, err.toString());
                }.bind(this),
                cache: false
            });

        },
        render: function() {
            return (
                <button name={this.props.deleteUrl} onClick={this.onClickingDelete}>Delete</button>
            );
        }
    });


    ReactDOM.render(<CommentBox listUrl="/list/"/>, 
document.getElementById('content'));

On page load, I'm getting

"Uncaught TypeError: Cannot read property 'props' of undefined"

in the CommentList's line call to DeleteButton. Wondering how "this" can go undefined

I'm trying out an example in reactJS where I'm displaying a list of records and delete them.Refresh the list after each delete. I saw many questions raised by this error heading, but nothing worked with me.

var CommentBox = React.createClass({
        loadCommentsFromServer: function () {
            $.ajax({
                url: this.props.listUrl,
                dataType: 'json',
                success: function (data) {
                    this.setState({data: data});
                }.bind(this),
                error: function (xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this),
                cache: false
            });
        },
        getInitialState: function () {
            return {data: []};
        },
        ponentDidMount: function () {
            this.loadCommentsFromServer();
        },
        onClickingDelete: function() {
            alert('Upper layer on click delete called');
            this.loadCommentsFromServer();
        },
        render: function () {
            return (
                    <div className="mentBox">
                        <h1>Static web page</h1>
                        <CommentList data={this.state.data} onClickingDelete={this.onClickingDelete}  />


                    </div>
            );
        }
    });


    var CommentList = React.createClass({
        render: function() {
            if (this.props.data != '') {
                var mentNodes = this.props.data.content.map(function (ment) {

                    return (
                            <div className="ment" key={ment.id}>
                                <h2 className="mentpageName">
                                    {ment.pageName}
                                </h2>

                                <p> {ment.pageContent} </p>

                                <DeleteButton deleteUrl={'/delete/' + ment.id} onClickingDelete={this.props.onClickingDelete}/>

                            </div>
                    );
                });
            }
            return (
                <div className="mentList">
                    {mentNodes}
                </div>
            );
        }
    });

    var DeleteButton = React.createClass({
        onClickingDelete: function() {
            $.ajax({
                url: this.props.deleteUrl,
                type: 'delete',
                success: function () {
                    alert('Successfully deleted');
                    this.props.onClickingDelete();
                }.bind(this),
                error: function (xhr, status, err) {
                   console.error(this.props.deleteUrl, status, err.toString());
                }.bind(this),
                cache: false
            });

        },
        render: function() {
            return (
                <button name={this.props.deleteUrl} onClick={this.onClickingDelete}>Delete</button>
            );
        }
    });


    ReactDOM.render(<CommentBox listUrl="/list/"/>, 
document.getElementById('content'));

On page load, I'm getting

"Uncaught TypeError: Cannot read property 'props' of undefined"

in the CommentList's line call to DeleteButton. Wondering how "this" can go undefined

• javascript
• jquery
• reactjs

• probably because you are deleting the element. your whole ponent is removed.. but then you are on the callback saying this.props.something. try creating a pointer to your this to call. – John Ruddell Commented May 7, 2016 at 7:16
• @John, that was working without "onCommentSubmit={this.handleCommentSubmit}" in ment list ponent. Removed that line to avoid confusion. I'm getting the above error on page load. Sorry for that. Please help. – User1230321 Commented May 7, 2016 at 9:34

1 Answer 1

When you use array.map, this is undefined and undergoes the normal resolution for this in javascript. In strict mode, it'll stay undefined.

• Non-strict mode: this resolves to Window

  > [1].map(function(test) {console.log(this)});
  > [object Window]
  

• Strict mode: this resolves to undefined

  > 'use strict'; [1].map(function(test) {console.log(this)});
  > undefined
  

There are different ways to bind it to the current object.

• Using map.thisArg

  this.props.data.content.map(function(ment) { ... }, this);
  

• Using bind

  this.props.data.content.map(function(ment) { ... }).bind(this);
  

• Using an arrow function

  this.props.data.content.map(ment => { ... });
  

• Using a variable

  var that = this;
  this.props.data.content.map(function(ment) 
      { ... onClickingDelete={that.props.onClickingDelete} ... });
  

Sources:

If a thisArg parameter is provided to map, it will be passed to callback when invoked, for use as its this value. Otherwise, the value undefined will be passed for use as its this value. https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

In strict mode, the value of this remains at whatever it's set to when entering the execution context. If it's not defined, it remains undefined. https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Operators/this