[BUG]: Failed to render <PayPalHostedFieldsProvider /> component.

[mariana-berkii]

Is there an existing issue for this?

• [X] I have searched the existing issues.

🐞 Describe the Bug

When the Hosted Fields component rerenders due to state changes, an error appears: Failed to render component. BraintreeError: Element already contains a Braintree iframe. As I understand this happens because the PayPalHostedFieldsProvider component has been initiated and when rerender happens, the PayPalHostedFieldsProvider component doesn't check if the hosted fields instance exists, it just tries to render the card fields again, which throws an error.

😕 Current Behavior

On rerenderings Hosted Fields fail with the error:

react-paypal-js.js:1237 Uncaught Error: Failed to render <PayPalHostedFieldsProvider /> component. BraintreeError: Element already contains a Braintree iframe.
    at react-paypal-js.js:1237:15
    at basicStateReducer (react-dom.development.js:16540:41)
    at updateReducer (react-dom.development.js:16664:22)
    at updateState (react-dom.development.js:17004:10)
    at Object.useState (react-dom.development.js:17915:16)
    at useState (react.development.js:1622:21)
    at PayPalHostedFieldsProvider (react-paypal-js.js:1188:20)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateFunctionComponent (react-dom.development.js:19588:20)
    at beginWork (react-dom.development.js:21601:16)

🤔 Expected Behavior

When the checkout page rerenders due to state changes (e.g. changes to basket), it would be good if in such cases the PayPal Hosted Fields component would not try to render Hosted Fields once again, but use the existing instance.

🔬 Minimal Reproduction

No response

🌍 Environment

| Software         |            Version(s)           |
| ---------------- | ------------------------------- |
| react-paypal-js  |              8.1.3              |
| Browser          |   Google Chrome 124.0.6367.60   |
| Operating System |   Windows 10 Enterprise 64-bit  |

Relevant log output

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

➕ Anything else?

No response

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[wsbrunson]

We have moved this repository to our paypal-js monorepo: https://github.com/paypal/paypal-js

We will be archiving this repo at the end of the day which will turn off Issues activity. If this is still an issue for you, please re-open this issue here:

Transferring this issue here: https://github.com/paypal/paypal-js/issues

[GinkTran]

Any update on this bug? We're showing a component to render Paypal card form with condition. It works fine only once, the second times it always throws this error

react-paypal-js.js:1237 Uncaught Error: Failed to render <PayPalHostedFieldsProvider /> component. BraintreeError: Element already contains a Braintree iframe.

[dylan-berndt]

bump