title: How can I fire a react function from a ajax request success function?
body: <p>I hope you can help. 
  I want to run the <strong>postPaymentHandler</strong> function. </p>
  
  <p>The ajax request gets call after a forms submit button is clicked. The form validates and the ajax request is successful. </p>
  
  <p>When the success function runs, the <strong>this.paymentSuccessful(filteredCatalogue);</strong> function fires the following error: 
  <strong><em>Uncaught TypeError: this.paymentSuccessful is not a function</em></strong></p>
  
  <pre><code>            submitFormHandler(e){
                e.preventDefault();
                var self = this;
                  $.ajax({
                     type: 'POST',
                     url: 'components/charge.php',
                     data : {
                       stripeToken: token
                     },
                     success: (data) =&gt; {
                      this.paymentSuccessful(filteredCatalogue); //This code fires an error in the console.
                    },
                     error: function(data,textStatus) {
                       console.log("Ajax Error!");
                     }
                   });//$.ajax
                  };
  
    //PaymentSuccessful function in root level scope of component.
    paymentSuccessful(){
      this.props.postPaymentHandler(filteredCatalogue);
    };
  </code></pre>
  
  <p>I tried assigning the self variable to this so the function reads <strong>self.props.postPaymentHandler(filteredCatalogue);</strong>. No luck. </p>
  
  <p>Any help is much appreciated.
  Thanks
  Moe</p>