Skip to content
This repository was archived by the owner on Mar 27, 2021. It is now read-only.

Commit 3687b9f

Browse files
Replace use of deprecated componentWillReceiveProps (#413)
* Remove use of deprecated lifecycle componentWillReceiveProps * Fix bug in demo component * Run prettier
1 parent 15f785c commit 3687b9f

File tree

4 files changed

+24
-22
lines changed

4 files changed

+24
-22
lines changed

demo/demo/index.js

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -155,16 +155,6 @@ class _PaymentRequestForm extends React.Component<
155155
},
156156
});
157157

158-
paymentRequest.on('token', ({complete, token, ...data}) => {
159-
console.log('Received Stripe token: ', token);
160-
console.log('Received customer information: ', data);
161-
complete('success');
162-
});
163-
164-
paymentRequest.canMakePayment().then((result) => {
165-
this.setState({canMakePayment: !!result});
166-
});
167-
168158
this.state = {
169159
canMakePayment: false,
170160
paymentRequest,
@@ -176,6 +166,18 @@ class _PaymentRequestForm extends React.Component<
176166
paymentRequest: Object,
177167
};
178168

169+
componentDidMount() {
170+
this.state.paymentRequest.on('token', ({complete, token, ...data}) => {
171+
console.log('Received Stripe token: ', token);
172+
console.log('Received customer information: ', data);
173+
complete('success');
174+
});
175+
176+
this.state.paymentRequest.canMakePayment().then((result) => {
177+
this.setState({canMakePayment: !!result});
178+
});
179+
}
180+
179181
render() {
180182
return this.state.canMakePayment ? (
181183
<PaymentRequestButtonElement

src/components/Element.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,8 @@ const Element = (
9090
});
9191
}
9292

93-
componentWillReceiveProps(nextProps: Props) {
94-
const options = _extractOptions(nextProps);
93+
componentDidUpdate() {
94+
const options = _extractOptions(this.props);
9595
if (
9696
Object.keys(options).length !== 0 &&
9797
!isEqual(options, this._options)

src/components/PaymentRequestButtonElement.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,13 +83,13 @@ class PaymentRequestButtonElement extends React.Component<Props> {
8383
this._element.mount(this._ref);
8484
});
8585
}
86-
componentWillReceiveProps(nextProps: Props) {
87-
if (this.props.paymentRequest !== nextProps.paymentRequest) {
86+
componentDidUpdate(prevProps: Props) {
87+
if (this.props.paymentRequest !== prevProps.paymentRequest) {
8888
console.warn(
8989
'Unsupported prop change: paymentRequest is not a customizable property.'
9090
);
9191
}
92-
const options = _extractOptions(nextProps);
92+
const options = _extractOptions(this.props);
9393
if (
9494
Object.keys(options).length !== 0 &&
9595
!shallowEqual(options, this._options)

src/components/Provider.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -150,16 +150,16 @@ export default class Provider extends React.Component<Props> {
150150
}
151151
}
152152

153-
componentWillReceiveProps(nextProps: Props) {
153+
componentDidUpdate(prevProps: Props) {
154154
const apiKeyChanged =
155155
this.props.apiKey &&
156-
nextProps.apiKey &&
157-
this.props.apiKey !== nextProps.apiKey;
156+
prevProps.apiKey &&
157+
this.props.apiKey !== prevProps.apiKey;
158158

159159
const stripeInstanceChanged =
160160
this.props.stripe &&
161-
nextProps.stripe &&
162-
this.props.stripe !== nextProps.stripe;
161+
prevProps.stripe &&
162+
this.props.stripe !== prevProps.stripe;
163163
if (
164164
!this._didWarn &&
165165
(apiKeyChanged || stripeInstanceChanged) &&
@@ -174,10 +174,10 @@ export default class Provider extends React.Component<Props> {
174174
return;
175175
}
176176

177-
if (!this._didWakeUpListeners && nextProps.stripe) {
177+
if (!this._didWakeUpListeners && this.props.stripe) {
178178
// Wake up the listeners if we've finally been given a StripeShape
179179
this._didWakeUpListeners = true;
180-
const stripe = ensureStripeShape(nextProps.stripe);
180+
const stripe = ensureStripeShape(this.props.stripe);
181181
this._meta.stripe = stripe;
182182
this._listeners.forEach((fn) => {
183183
fn(stripe);

0 commit comments

Comments
 (0)