Rendering List Error

  • nocodeprocode-1350924851346542783

    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.kayr-1350935303484870768

    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.
  • lucasg-1350935564509253723

    Lucas G

    1 month ago

    Set the toast id as the key yeah
  • Just tested it and it fixes it
  • 1350935748127228075-image.png
    ❤️1
  • {"type":"formula","formula":{"type":"path","path":["ListItem","Item","id"]}}
  • nocodeprocode-1350938430246228080

    NoCode ProCode

    1 month ago

    Thanks so much!
    👍3