Signal dont update the class
I have two components one the principal with the signal and te other is the button, the class shloud update depending on the state but is not working, the state change, but the ui dont change
const SectionPlan = () =>
{
const [filter, setFilter] = createSignal('home');
const handleFilterHome = (): void =>
{
setFilter('home');
};
const handleFilterEnterprise = (): void =>
{
setFilter('enterprise');
};
return (
<section>
<Button
onclick={handleFilterHome}
class={filter() === 'home' ? 'button-plan button-plan--active' : 'button-plan')}
>
{sectionPlanLocale.buttonHome}
</Button>
<Button
onclick={handleFilterEnterprise}
class={filter() === 'enterprise' ? 'button-plan button-plan--active' : 'button-plan')}
>
{sectionPlanLocale.buttonEnterprise}
</Button>
</section>
);
};
export { SectionPlan };const SectionPlan = () =>
{
const [filter, setFilter] = createSignal('home');
const handleFilterHome = (): void =>
{
setFilter('home');
};
const handleFilterEnterprise = (): void =>
{
setFilter('enterprise');
};
return (
<section>
<Button
onclick={handleFilterHome}
class={filter() === 'home' ? 'button-plan button-plan--active' : 'button-plan')}
>
{sectionPlanLocale.buttonHome}
</Button>
<Button
onclick={handleFilterEnterprise}
class={filter() === 'enterprise' ? 'button-plan button-plan--active' : 'button-plan')}
>
{sectionPlanLocale.buttonEnterprise}
</Button>
</section>
);
};
export { SectionPlan };const Button = ({ children, class: customClass, onclick, ...rest }) =>
{
return (
<button
onclick={onclick}
class={customClass}
{...rest}
>
{children}
</button>
);
};
export { Button };const Button = ({ children, class: customClass, onclick, ...rest }) =>
{
return (
<button
onclick={onclick}
class={customClass}
{...rest}
>
{children}
</button>
);
};
export { Button };
