Dynamic List

A todo list that adds and removes items — demonstrating i-for with reactive state.

Component

components/TodoList/TodoList.lspa

<python>
class TodoList(Component):
    def context(self, props):
        return {}

    def client(self):
        return {
            "state": {
                "items": ["Buy milk", "Write docs"],
                "draft": "",
            },
        }

    def setDraft(self):
        self.state.draft = ""

    def clearAll(self):
        self.state.items = []
</python>

<template>
  <div class="todo">
    <ul>
      <li i-for="item in state.items" class="todo__item">
        {{ item }}
      </li>
    </ul>

    <div class="todo__input">
      <input type="text" :value="state.draft" @input="setDraft" placeholder="New item..." />
      <button @click="addItem">Add</button>
    </div>

    <button l-if="state.items.length > 0" @click="clearAll">Clear all</button>
  </div>
</template>

How i-for renders

Pattern notes

• i-for="item in state.items" works the same on server and client
• l-if="state.items.length > 0" hides the button for empty lists
• For true dynamic push/splice on arrays you can use backend-integration to seed items from server props