how to read this.props in a function

Question

I'm new to reactjs with ES6, the problem is that I can not read the 'this.props.productId' property inside the onDelete () function, this is the error: DeleteProductComponent.js:15 Uncaught TypeError: Cannot read property 'props' of null can anyone give me an optimum solution or tell me what I'm doing wrong? Thank you

 import React, { Component } from 'react';

    class DeleteProductComponent extends Component {

     componentDidMount() {

        $('.page-header h1').text('Delete Product');

        }

onDelete(){

var id = this.props.productId;

        $.ajax({
            url: "http://localhost/my-app/public/delete.php",
            type : "POST",
            contentType : 'application/json',
            data : JSON.stringify({'id' : id}),
            success : function(response) {
                this.props.changeAppMode('read');
            }.bind(this),
            error: function(xhr, resp, text){
                // show error in console
                console.log(xhr, resp, text);
            }
        });
    }

    // handle save changes button here
    // handle save changes button clicked

      render () {

        return (
            <div className='row'>
                <div className='col-md-3'></div>
                <div className='col-md-6'>
                    <div className='panel panel-default'>
                        <div className='panel-body text-align-center'>Are you sure?</div>
                        <div className='panel-footer clearfix'>
                            <div className='text-align-center'>
                                <button onClick={this.onDelete}
                                    className='btn btn-danger m-r-1em'>Yes</button>
                                <button onClick={() => this.props.changeAppMode('read')}
                                    className='btn btn-primary'>No</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='col-md-3'></div>
            </div>
        );
      }

    } 
    export default DeleteProductComponent;

Possible duplicate of [Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class](http://stackoverflow.com/questions/39552536/why-do-i-have-to-bindthis-for-methods-defined-in-react-component-class-but-n) — Lyubomir, May 13 '17 at 18:56
@MayankShukla this will work but it's a bad practice to bind it inside the render method as it will create a new instance on each render, bad for performance. — Sagiv b.g, May 13 '17 at 20:22

score 2 · Accepted Answer · answered May 13 '17 at 20:25

Bind onDelete() function to the component by 2 ways:

In the constructor:

class DeleteProductComponent extends Component {

  constructor(props) {
    super(props);
    this.onDelete = this.onDelete.bind(this);
  }

  componentDidMount() {}

  onDelete() {}

  render() {}

}

Or use ES6's syntax for onDelete() (then it will be bound to the component by itself):

 onDelete = () => {

    var id = this.props.productId;

    $.ajax({
        url: "http://localhost/my-app/public/delete.php",
        type : "POST",
        contentType : 'application/json',
        data : JSON.stringify({'id' : id}),
        success : function(response) {
            this.props.changeAppMode('read');
        }.bind(this),
        error: function(xhr, resp, text){
            // show error in console
            console.log(xhr, resp, text);
        }
    });
  }

Thanks for your answer, and for the suggestion of two ways, it works perfect! — Ivan Kalashnikov, May 15 '17 at 15:56
Glad you had it working ^^ ! You can ping me for further issues with reactjs, If I can I will try to help! — thinhvo0108, May 15 '17 at 15:58

score 1 · Answer 2 · answered May 13 '17 at 20:21

You in classs you need to bind this to the class. The best place to do it is in the constructor of the class as it will run only the first time the class instantiate rather then doing it inside the render method witch will create a new instance of the handler on each render.
So you should do this in the constructor:

    class DeleteProductComponent extends Component {
        constructor(props, context) {
            super(props, context);

            this.onDelete = this.onDelete.bind(this);
        }
    //.... rest of the class

You have been very right, I forgot this part completely thank you very much !. — Ivan Kalashnikov, May 15 '17 at 15:55

how to read this.props in a function

2 Answers2

Linked