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:
<>
<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:
<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:
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.