SolidJS•14mo ago

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 };

6 Replies

Nathan•14mo ago

You're destructuring props in the Button component. This breaks reactivity. Instead, you can use splitProps:

import { splitProps, type ParentComponent } from "solid-js"

interface Props {...}

const Button: ParentComponent<Props> = (props) => {
  const [local, rest] = splitProps(props, ["customClass", "onClick", "children"])

return (
  <button
     onclick={local.onclick}
     class={local.custonClass}
     {...rest}
>
     {local.children}
   </button>
  );
};

export { Button }

import { splitProps, type ParentComponent } from "solid-js"

interface Props {...}

const Button: ParentComponent<Props> = (props) => {
  const [local, rest] = splitProps(props, ["customClass", "onClick", "children"])

return (
  <button
     onclick={local.onclick}
     class={local.custonClass}
     {...rest}
>
     {local.children}
   </button>
  );
};

export { Button }

In general, you want to avoid destructing props. So instead of destructuring with

const Component = ({foo, bar}) => ...

const Component = ({foo, bar}) => ...

simply use

const Component = (props) =>

const Component = (props) =>

and then use props.foo and props.bar.

AesthetiCoderOP•14mo ago

thanks this works, there is a method of doing in whit destructuring ?

lxsmnsyc•14mo ago

yes, but with 3rd party tools. Without it, destructuring just breaks reactivity (it's a JS behavior)

AesthetiCoderOP•14mo ago

well in that case split props is the good way of doing thanks

tlentz•14mo ago

there is this you can try if youd like to retain reactivity when destructuring https://solid-primitives.netlify.app/package/destructure

Solid Primitives

A library of high-quality primitives that extend SolidJS reactivity

lxsmnsyc•14mo ago

this one produces a function per property so might not be the native destructuring you are looking for but it's close

Gaming

Programming

Signal dont update the class