For is not Reactive ?
Hi, I've made this filter list using For:
The signal looks like this:
The console logs show that the value are changing, but the elements are not re-rendering. Am I missing something ?
<ul
tabIndex={0}
class={`dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52`}
>
<For each={filters()}>
{(f) => (
<li>
<div
onClick={() => toggleFilter(f.id)}
class="flex justify-between"
>
<p>{f.label}</p>
{f.selected ? <FaSolidCheck size={12} /> : null}
</div>
</li>
)}
</For>
</ul><ul
tabIndex={0}
class={`dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52`}
>
<For each={filters()}>
{(f) => (
<li>
<div
onClick={() => toggleFilter(f.id)}
class="flex justify-between"
>
<p>{f.label}</p>
{f.selected ? <FaSolidCheck size={12} /> : null}
</div>
</li>
)}
</For>
</ul>The signal looks like this:
const [filters, setFilters] = createSignal([
{ id: 'active', label: 'Active', selected: true },
{ id: 'terminated', label: 'Terminated', selected: false },
]);
const toggleFilter = (id: string) => {
console.log('before', filters()[0].selected);
setFilters(
filters().map((f) => {
if (f.id === id) {
f.selected = !f.selected;
}
return f;
}),
);
console.log('after', filters()[0].selected);
}; const [filters, setFilters] = createSignal([
{ id: 'active', label: 'Active', selected: true },
{ id: 'terminated', label: 'Terminated', selected: false },
]);
const toggleFilter = (id: string) => {
console.log('before', filters()[0].selected);
setFilters(
filters().map((f) => {
if (f.id === id) {
f.selected = !f.selected;
}
return f;
}),
);
console.log('after', filters()[0].selected);
};The console logs show that the value are changing, but the elements are not re-rendering. Am I missing something ?
