[React 16.5] - NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

I am having a bug using wijmo 5.20182.500 with react. It appears that react is attempting to redraw a control when it has not changed. I have a TreeView control that when selected changes a state property and reveals some other controls on screen. The logic to render both the TreeView and the other content exists together in a single render call. It appears that even though the TreeView has not changed react is re-rendering it, because when I click on a TreeView checkbox the whole control blinks and resets all the checkboxes (which is the default state). I found some related posts, which all indicated wrapping the control in a div, but that has not worked for me. I’ve included a screenshot but basically what happens is that when checkedItemsChanged is called it updates state, which of course triggers render. However the TreeView control should not re-render but it does every time for some reason and I think that’s at least part of reason for the error I included below (chrome browser).

checkedItemsChanged = (s, e) => {
        const self = this;
        const currentItem = this.reportsTreeView.selectedItem;

        if (currentItem.report) {
            if (currentItem.report === 'MarketingMaterials') {
                const selectedReport = "MarketingMaterial";
                self.setState({ selectedReport });
            } else if (currentItem.report === 'DataPak') {
                const selectedReport = "DataPak";
                self.setState({ selectedReport });
            }
        }
    }

render() {
        if (!this.props.user.id)
            return null;

        const reportsTreeViewItems = this.securetizeScreen();

        let paramView = this.getParamView();

        return (
            <main className="container">
                <div className="row PageTitle">
                    <b>Select Report:</b>
                </div>

                <div className="row pm-form-container">
                    <div className="col-md-3">
                        <label className="dropdown-label label-inline pm-label pm-label-top"></label>
                        <div className="dropdown dropdown-left pm-treeview-container">
                            <TreeView
                                initialized={this.reportsTreeViewInitialized}
                                itemsSource={reportsTreeViewItems}
                                displayMemberPath={'header'}
                                childItemsPath={'items'}
                                showCheckboxes={Boolean(true)}
                                formatItem={this.formatItem}
                                checkedItemsChanged={this.checkedItemsChanged}
                                isCheckedChanged={this.itemChecked}
                            />
                        </div>
                    </div>

                    {paramView}

                </div>
            </main>
        );
    }

[jsoneaday]

Ok fair enough. By way I’ve been watching your redux videos on egghead.io. Good stuff.

[gaearon]

If you render a DOM node with something else, React won’t “recognize” it at all. I think what you’re seeing is something different, but I can’t guess without actually running your code.