# What is the proper way to unmount a WC component?

**URL:** <https://forums.creativeclouddeveloper.com/t/what-is-the-proper-way-to-unmount-a-wc-component/8738>\
**Category:** InDesign\
**Created:** [November 20, 2024, 3:59pm UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-proper-way-to-unmount-a-wc-component/8738 "2024-11-20T15:59:01Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![SweatersInSummer](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/sweatersinsummer/32/4615_2.png) [@SweatersInSummer](https://forums.creativeclouddeveloper.com/u/SweatersInSummer)\
**Post date:** [November 20, 2024, 3:59pm UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-proper-way-to-unmount-a-wc-component/8738/1 "2024-11-20T15:59:01Z")

</div>

I’m not sure if I’m doing something wrong with using the WC component included in the React starter, but when i try to swap out components conditionally.

heres one component with sp-pickers wrapped in the WC:

```javascript
        <>
            <div className="relative border p-2 mb-2">
                <WC onChange={handlePickerChange} id="wc">
                    <sp-picker id={`bookField`} class="w-80 mb-2" ref={bookRef}>
                        <sp-label slot="label"> Select the correct book field.</sp-label>
                        <sp-menu slot="options">
                            {headerRow.map((cellValue, index) => (
                                <sp-menu-item key={index} id={index} selected={index === 1 ? true : null}>
                                    {cellValue}
                                </sp-menu-item>
                            ))}
                        </sp-menu>
                    </sp-picker>
                    <sp-picker id={`termField`} class="w-80 mb-2" ref={termRef}>
                        <sp-label slot="label"> Select the correct term field.</sp-label>
                        <sp-menu slot="options">
                            {headerRow.map((cellValue, index) => (
                                <sp-menu-item key={index} id={index} selected={index === 0 ? true : null}>
                                    {cellValue}
                                </sp-menu-item>
                            ))}
                        </sp-menu>
                    </sp-picker>
                    <sp-picker id={`definitionField`} class="w-80 mb-2" ref={defRef}>
                        <sp-label slot="label"> Select the correct definition field.</sp-label>
                        <sp-menu slot="options">
                            {headerRow.map((cellValue, index) => (
                                <sp-menu-item
                                    key={index}
                                    id={index}
                                    selected={index === headerRow.length - 1 ? true : null}
                                >
                                    {cellValue}
                                </sp-menu-item>
                            ))}
                        </sp-menu>
                    </sp-picker>
                </WC>
                <div className="flex flex-row w-full mt-2 content-center">
                    <sp-action-button class="mx-1" onClick={handleGenerateFile}>
                        <div slot="icon">
                            <CodeIcon />
                        </div>
                        Generate Glossary File
                    </sp-action-button>
                </div>
            </div>
            <div className="relative border p-2 flex flex-row items-center content-center">
                <sp-button variant="secondary" quiet class="mx-1">
                    Clear Data
                </sp-button>
                <sp-button variant="primary" quiet class="mx-1" onClick={handleClose}>
                    Close
                </sp-button>
            </div>
        </>

```

and here is where i conditionally swap out components within a dialog:

```javascript
        <GlossaryManagementContext.Provider
            value={{
                data,
                setData,
                bookSpecificData,
                setBookSpecificData,
                handleClose,
                handleOpenDialog,
                window,
                setWindow,
                handleRemoveGlossary,
            }}
        >
            {window === "select" && <SelectFile />}
            {window === "setFields" && <SetFields />}
            {window === "tool" && <GlossaryTool />}
        </GlossaryManagementContext.Provider>

```

When I swap out the components is get this error:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/7/7e4264ac1d15b87c3836ce03277a69c2d8b0ae0a.png)

I’ve resorted to wrapping the last line of the WC useEffect cleanup in a try/catch to avoid breaking my dialog. Any help is appreciated.