Svelte uses let variables to hold local component state.
In this example, we'll create an AddTodo component to add new todos.
Data is reactive and can be used as state.
Reassigning a variable will invalidate the component and trigger an update. After an update is triggered, Svelte will update the DOM to reflect the new state.
To update an object or an array, it must be reassigned.
TodoList.svelte
<script>import Todo from'./Todo.svelte';import AddTodo from'./AddTodo.svelte';let todos = [];functionaddTodo(event) { todos = todos.concat([event.detail]) }</script>{#each todos as todo} <Todo{...todo} />{/each}<AddTodoon:add={addTodo} />
A more succinct way to bind state to an element or a component is with Svelte's bind: attribute prefix.