Rendering List Error

NoCode ProCode

1 month ago

I got a weird rendering issue with lists - I'm building a toast package and when I remove the toast it flashes gut the list item moves one down, I've tried countless possibilities, but I'm stuck with the out animation - I set a class to transition it out, and that works nice, but the moment I remove it after it transitioned out I get a flashing in the list.

https://toddle.dev/projects/purple_taun__e_parental_octopus

I know I could use spark for this - but I really wanna learn this myself and understand how lists and rendering in Toddle works on a deep level - so any help is appreciated 🙏
Max

1 month ago

Hi! You need to set a stable repeat key (e.g. a UUID) on your toast list. When you don't set a repeat key, the whole list is re-rendered when one item changes.
Lucas G

1 month ago

Set the toast id as the key yeah
Just tested it and it fixes it
❤️1
{"type":"formula","formula":{"type":"path","path":["ListItem","Item","id"]}}
@Max
Hi! You need to set a stable repeat key (e.g. a UUID) on your toast list. When you don't set a repeat key, the whole list is re-rendered when one item changes.
NoCode ProCode

1 month ago

Thanks so much!
👍3