Show doesn't hide component when signal changes
Hi everyone. I'm having trouble wrapping my head around why a <Show> isn't working the way I think it should work. I have an onClick handler that toggles the signal. A few different onClick handlers are rendered and clicking each one toggles signal appropriately. Then the Show shows the child component with the right props. But when one click handler is clicked the other child components should go away since the conditions in the when block is no longer valid. But I'm just getting more child components each time I click a different event handler when only one child component should be shown. No comprende
Tried a few different tactics and this is what I'm working with now.
const [selected, setSelected] = createSignal(null)
return (
<For each={thing()} fallback={<></>}>
{(info) => (
<>
<br />
<span
onClick={() => {
setSelected(
info.property === selected()
? null
: info.property
)
}}
>
Click Here to Change Component Shown
</span>
<Show when={selected() === info.property}>
<ChildComponent
property={info.property}
otherProperty={props.thing}
/>
</Show>
</>
)}
</For>
)
}
Tried a few different tactics and this is what I'm working with now.
const [selected, setSelected] = createSignal(null)
return (
<For each={thing()} fallback={<></>}>
{(info) => (
<>
<br />
<span
onClick={() => {
setSelected(
info.property === selected()
? null
: info.property
)
}}
>
Click Here to Change Component Shown
</span>
<Show when={selected() === info.property}>
<ChildComponent
property={info.property}
otherProperty={props.thing}
/>
</Show>
</>
)}
</For>
)
}
