SolidJSS
SolidJS•3y ago•
1 reply
AesthetiCoder

Re render on filter in a for

I have an animation that runs when the element is visible with an observable the problem is after the first animation is all good but I have a button that filters that for, and when it gets filtered it doesn't re-render

I solve this in react by changing the key of the element so react detects that the filter is a new element every time, how can this be done in solid? 

const SectionPlan = () => 
{
  const [ filter, setFilter ] = useSignal('home');

  const handleFilterHome = (): void =>
  {
    setFilter('home');
  };

  const handleFilterEnterprise = (): void =>
  {
    setFilter('enterprise');
  };

  return (
  <>
        <button onclick={handleFilterHome}>
          {sectionPlanLocale.buttonHome}
        </button>

        <button onclick={handleFilterEnterprise}>
          {sectionPlanLocale.buttonEnterprise}
        </button>

        <For each={sectionPlanLocale.plan.filter((element) => element.category === filter())}>
          {(plan) => <CardPlan
            image={plan.image}
            price={plan.price}
            title={plan.title}
            benefit={plan.benefit}
            velocity={plan.velocity}
            data-animate='animate-right-left'
          />
          }
        </For>
    </>
  )
}
Was this page helpful?