Re-Render triggered by state change gives inconsistent results with TypeError in console

[AhnafCodes]

Hi, I am trying to re-render the component based on state change. But it fails render correctly. Please see the example reproduction link below and click few times on the button for colors. its failing when it diffs and https://codepen.io/ahnafcodes/pen/PooyGdK

Error in console: TypeError: child.remove is not a function

let removeChild = (child, parentNode) => { / istanbul ignore if / if ('remove' in child) { removeChild = child => { child.remove(); }; } else { removeChild = (child, parentNode) => { / istanbul ignore else / if (child.parentNode === parentNode) parentNode.removeChild(child); }; } removeChild(child, parentNode); };

simpler version let removeChild = (child, parentNode) => { if (child.remove) { child.remove() } else if (child.parentNode === parentNode) { parentNode.removeChild(child); } };

but i don't know if have specific reasons for using the existing function

Thank you

[WebReflection]

That's a dirty way to swap elements with text nodes and there's no need to be that dirty when you have an array that can simply grow or shrink without issues so ... just use the array as such:

renderControls() {
        const controlsState = this.getState().controlsState;
        return Object.keys(controlsState).filter(controlState =>
            controlsState[controlState]).map(controlState => html`<button class=${controlState}>${controlState}</button>`);
    }

[WebReflection]

FYI the latest heresy should not throw, but still just use Arrays and filter, before map, to change the amount of same nodes/holes in your logic.