React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

Question

If state is true to play youtube video, and it is false I would like to delete youtube playing. MY code is as follows.

{this.state.isPreViewVideo && <PlayYouTube video_id="ScSn235gQx0" />} 

sandbox URL:

https://codesandbox.io/s/xryoz10k6o

Reproduction method:

If 4-digit characters are included in input form, "isPreViewVideo: true" by setState and if it is less than false

It works fine when state is true, but when state is false, I encounter this error as follows.

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.  Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. 

is there a way to avoid or resolve this error?

Answer 1

In playYouTube.tsx line 78 replace <React.Fragment>...</React.Fragment> with <div>...</div>

Fragments let you group a list of children without adding extra nodes to the DOM.

This explains the error Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

More on fragments here https://reactjs.org/docs/fragments.html