title: how to read this.props in a function
body: <p>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: <code>DeleteProductComponent.js:15 Uncaught TypeError: Cannot read property 'props' of null</code> can anyone give me an optimum solution or tell me what I'm doing wrong? Thank you</p>
  
  <pre><code> 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 (
              &lt;div className='row'&gt;
                  &lt;div className='col-md-3'&gt;&lt;/div&gt;
                  &lt;div className='col-md-6'&gt;
                      &lt;div className='panel panel-default'&gt;
                          &lt;div className='panel-body text-align-center'&gt;Are you sure?&lt;/div&gt;
                          &lt;div className='panel-footer clearfix'&gt;
                              &lt;div className='text-align-center'&gt;
                                  &lt;button onClick={this.onDelete}
                                      className='btn btn-danger m-r-1em'&gt;Yes&lt;/button&gt;
                                  &lt;button onClick={() =&gt; this.props.changeAppMode('read')}
                                      className='btn btn-primary'&gt;No&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className='col-md-3'&gt;&lt;/div&gt;
              &lt;/div&gt;
          );
        }
  
      } 
      export default DeleteProductComponent; 
  </code></pre>