react-stripe-elements getting "Cannot read property 'props' of undefined"

Question

Following react-stripe-elements sample in readme file. I can set up the stripe form properly but I get below error on pressing pay button.

Uncaught TypeError: Cannot read property 'props' of undefined
    at handleSubmit (paymentForm.jsx?9f51:10)
    at HTMLUnknownElement.callCallback (react-dom.development.js?cada:540)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:579)
    at Object.invokeGuardedCallback (react-dom.development.js?cada:436)
....

My paymentForm.jsx is like this:

import React from 'react'; import {injectStripe} from 'react-stripe-elements';

import PaymentCard from './paymentCard'

class PaymentForm extends React.Component {

  handleSubmit(ev) {
    ev.preventDefault();
    this.props.stripe.createToken({name: 'Jenny Rosen'}).then(({token}) => {
      console.log('Received Stripe token:', token);
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <PaymentCard />
        <button>Pay</button>
      </form>
    )
  }

}
export default injectStripe(PaymentForm);

Answer 1

Ok problem is solved by binding the the function to the class

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