S
SolidJS•3w ago
Bravi

How to prevent re-creation of a component inside <For>?

Hi everyone. To illustrate my issue, I created a very minimal version of the application that I have. To see the problem I am facing, just click on any of the links in the rendered page and then click on the button that appears. You will notice that the button will disappear (because the component gets re-created and the state is reset). What would be the best approach to prevent this from happening? https://codesandbox.io/p/devbox/r5k78c
3 Replies
Erik Demaine
Erik Demaine•3w ago
The core problem is that the object identity of the project is changing. I believe if you change generateNewProject to modify the matching object in-place instead of using {...node, url: ...} (but still build a brand new array via map so the signal changes overall), it will work. A cleaner approach might be to use a store instead of a signal. Then you can modify one piece of the project without the identity of the project object changing.
webstrand
webstrand•3w ago
You could also use <Key>/keyArray from https://primitives.solidjs.community/package/keyed/ or maybe even <Index>
Bravi
BraviOP•3w ago
Oh I didn't know about Keyed. Thank you, will look into that now I was actually thinking about using a store + reconcile for more granularity but at the same time I was trying to avoid quite a bit of refactor 😄 but I guess there's no way around it
Want results from more Discord servers?
Add your server