SolidJS•10mo ago

Non-return part of <For>'s callback only seems to run once?

I have a page where I initially fetch a list of items, then I can type in a search box to filter that list on the client, which is part of a form (using createStore()) where it's a list of selected items. I tried to perform the checking logic to see if each "searched item" is part of the "selected items" list, and then do some styling + toggle logic on those items. However, if I do that logic outside the return of <For>'s callback and in the body, then it seems to only run once on first load, and then never again. But it does work if I put it inside the returned JSX for each item instead (which unfortunately means I can't reuse the check-if-already-selected logic). Anyone knows why this is so? It's probably some quirk with Solid that I'm not familiar with. I've done something similar in React and it does work, but it might be one of the big reactivity differences. (example code in next message)

6 Replies

Utsuhoagie•10mo ago

(too long so I gotta post externally) https://pastes.io/7nmrbrpcql

Pastes.io

SolidJS question - Pastes.io

REEEEE•10mo ago

just make it a function. The reason it works in the JSX is because you're accessing form.OfficialSongIds in a function/the JSX where it is reactive. If you do it in the For before the return and only define it as a variable, changes to form.OfficialSongIds won't update the variable

<For each={searchedOfficialSongs()}>
                                {(searchedOfficialSong) => {
                                    const hasSearchedSong = () => form.OfficialSongIds.includes(searchedOfficialSong.Id)

<For each={searchedOfficialSongs()}>
                                {(searchedOfficialSong) => {
                                    const hasSearchedSong = () => form.OfficialSongIds.includes(searchedOfficialSong.Id)

Optionally pull it out of the For const hasSearchedSong = (songId: string) => form.OfficialSongIds.includes(songId)

Utsuhoagie•10mo ago

Does this apply to every place where I'd like to access reactive state? I initially thought it should be fine as long as it's not in a top-level body of the component itself. Here it's still technically inside the return of my page component

REEEEE•10mo ago

Right, however it is inside the For. The addition of wrapping your element code that is inside of the return statement of the For into a function you can consider it to be a component

thetarnav•10mo ago

you can use solid.getListener() to see is you are inside a computation or not but generally you develop a feel for it so you know what will be reactive and what needs to be a callback

Utsuhoagie•10mo ago

Yeah I guess I'll need to experiment with Solid more to get used to it I'm liking it so far because there's just entire groups of bugs I don't see anymore, but at the same time I'll have to unlearn some of my habits back in React Thanks to you both btw!

Gaming

Programming

Non-return part of <For>'s callback only seems to run once?