Rerendering <For> element?

[silver ocean]

I'm using a filter when iterating over elements to narrow results but the problem is it seems as though once the elements within the <For> tag have been rendered changing the signal and calling it within is not rerendering the element. Is there a way to force this behavior or should I take a different approach with this?

<For
            each={listings()
              .reverse()
              .filter((listing: Listing) => {
                if (seasonFilter() === "") return true;
                console.log("ran");
                return seasonFilter() === listing.season;
              })}
          >

[celest venture]

You can filter items before passing them to each.

const filtered = () => arr.filter(el => ...)

Here filtered is still reactive.

[woven shore]

I think it's fine to filter it within each as it's within a JSX expression, it will be reactive.
Declaring a function beforehand might make the code more readable, but I don't think there is a difference in functionality.

While not being certain what is the problem, I have two comments:

• reverse() reverses the array in-place. I don't think this is what you want here (it will mutate what is stored in the signal).

• If you pass a mutated version of the existing listings to setListings, it will do nothing as the signal doesn't trigger if the new value is equal to the old one (which is the case if the array instance is the same). You need to either pass a new array, or declare the signal with {equals: false}option.

[silver ocean]

that worked

[tranquil stratus]

For uses referential equality - always keep that in mind.

As long as you update the original objects in state, the component will update the props without running each on it

It would be safe to shallow copy the array - since it's a list of objects, the referential equality is maintained - array.slice().reverse() or something like that

If it's a list of objects, that is