Dropin Error: adyen.js:1 Uncaught (in promise) TypeError: Cannot read property 'state' of null about adyen-web HOT 5 CLOSED

We ran into a similar issue not long ago, it turns out that this happens because of the useEffect that creates the checkout and mounts it is executed multiple times because your useEffect hook has dependencies. We removed our dependencies from the array and that fixed our issue.

from adyen-web.

We ran into a similar issue not long ago, it turns out that this happens because of the useEffect that creates the checkout and mounts it is executed multiple times because your useEffect hook has dependencies. We removed our dependencies from the array and that fixed our issue.

It doesn't sound like a solution at all: if I remove dropinContainer from dependencies dropin component won't mount correctly.

from adyen-web.

Hi @nastikue, and thanks for reaching out.

After seeing the code snippet you shared it seems the problem here is that you're using createRef, which will return a new ref on every render. Using useRef instead should solve the issue.

I made a quick demo here where you can see it in action.
https://codesandbox.io/s/frosty-hill-tmupv?file=/src/App.js
I'm using the Sepa component instead of the Card component just to simplify the demo, but it's the same thing.

Hope this helps, let us know if there's anything else!

from adyen-web.

@pabloai thank you for your research, it really helped much: saving to state works after createRef is changed to useRef. There is warning in adyen documentation to avoid DOM element rerenders https://docs.adyen.com/checkout/drop-in-web http://prntscr.com/vthj7b and I found out that similar error can be received if to define a callback inside sibling element, i.e. onClick in button in the below example:

<div className="App">
      <div
        ref={dropinContainer}
        className="dropin-component"
        data-test-id="dropin-container"
      />
      <button onClick={()=> console.log('button')}>Button that produces error</button>
</div>

I think that these errors handling should be added in adyen to make it clear to developers where the problem is.

from adyen-web.

Hi @nastikue,

I'm glad that helped. About the warning in the Docs, it's to favor passing a reference to the mount method instead of passing a DOM element or a selector string In your example this is done correctly.

Regarding the arrow functions in the JSX props, keep in mind this is a bad practice in React anyway. There's even a lint rule to check this: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

Cheers,

from adyen-web.