Replace use of deprecated componentWillReceiveProps (#413)

* Remove use of deprecated lifecycle componentWillReceiveProps

* Fix bug in demo component

* Run prettier

Author: cweiss-stripe

demo/demo/index.js

@@ -155,16 +155,6 @@ class _PaymentRequestForm extends React.Component<
       },
     });
 
-    paymentRequest.on('token', ({complete, token, ...data}) => {
-      console.log('Received Stripe token: ', token);
-      console.log('Received customer information: ', data);
-      complete('success');
-    });
-
-    paymentRequest.canMakePayment().then((result) => {
-      this.setState({canMakePayment: !!result});
-    });
-
     this.state = {
       canMakePayment: false,
       paymentRequest,
@@ -176,6 +166,18 @@ class _PaymentRequestForm extends React.Component<
     paymentRequest: Object,
   };
 
+  componentDidMount() {
+    this.state.paymentRequest.on('token', ({complete, token, ...data}) => {
+      console.log('Received Stripe token: ', token);
+      console.log('Received customer information: ', data);
+      complete('success');
+    });
+
+    this.state.paymentRequest.canMakePayment().then((result) => {
+      this.setState({canMakePayment: !!result});
+    });
+  }
+
   render() {
     return this.state.canMakePayment ? (
       <PaymentRequestButtonElement

src/components/Element.js

@@ -90,8 +90,8 @@ const Element = (
       });
     }
 
-    componentWillReceiveProps(nextProps: Props) {
-      const options = _extractOptions(nextProps);
+    componentDidUpdate() {
+      const options = _extractOptions(this.props);
       if (
         Object.keys(options).length !== 0 &&
         !isEqual(options, this._options)

src/components/PaymentRequestButtonElement.js

@@ -83,13 +83,13 @@ class PaymentRequestButtonElement extends React.Component<Props> {
       this._element.mount(this._ref);
     });
   }
-  componentWillReceiveProps(nextProps: Props) {
-    if (this.props.paymentRequest !== nextProps.paymentRequest) {
+  componentDidUpdate(prevProps: Props) {
+    if (this.props.paymentRequest !== prevProps.paymentRequest) {
       console.warn(
         'Unsupported prop change: paymentRequest is not a customizable property.'
       );
     }
-    const options = _extractOptions(nextProps);
+    const options = _extractOptions(this.props);
     if (
       Object.keys(options).length !== 0 &&
       !shallowEqual(options, this._options)

src/components/Provider.js

@@ -150,16 +150,16 @@ export default class Provider extends React.Component<Props> {
     }
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentDidUpdate(prevProps: Props) {
     const apiKeyChanged =
       this.props.apiKey &&
-      nextProps.apiKey &&
-      this.props.apiKey !== nextProps.apiKey;
+      prevProps.apiKey &&
+      this.props.apiKey !== prevProps.apiKey;
 
     const stripeInstanceChanged =
       this.props.stripe &&
-      nextProps.stripe &&
-      this.props.stripe !== nextProps.stripe;
+      prevProps.stripe &&
+      this.props.stripe !== prevProps.stripe;
     if (
       !this._didWarn &&
       (apiKeyChanged || stripeInstanceChanged) &&
@@ -174,10 +174,10 @@ export default class Provider extends React.Component<Props> {
       return;
     }
 
-    if (!this._didWakeUpListeners && nextProps.stripe) {
+    if (!this._didWakeUpListeners && this.props.stripe) {
       // Wake up the listeners if we've finally been given a StripeShape
       this._didWakeUpListeners = true;
-      const stripe = ensureStripeShape(nextProps.stripe);
+      const stripe = ensureStripeShape(this.props.stripe);
       this._meta.stripe = stripe;
       this._listeners.forEach((fn) => {
         fn(stripe);