S
SolidJS•15mo ago
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>
    </>
  )
}
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>
    </>
  )
}
1 Reply
TOBII
TOBII•15mo ago
This does not solve the actual problem, but you can use TransitionGroup, see https://github.com/solidjs-community/solid-transition-group
GitHub
GitHub - solidjs-community/solid-transition-group: SolidJS componen...
SolidJS components for applying animations when children elements enter or leave the DOM. - GitHub - solidjs-community/solid-transition-group: SolidJS components for applying animations when childr...

Did you find this page helpful?