docs: Fixed TODO id in animation tutorial (#1108)

* Tutorial: Fixed animation id * Tutorial: Fixed id as key in another file --------- Co-authored-by: Tee Ming <[email protected]>
sveltejs · Jan 13, 2025 · 8422db4 · 8422db4
1 parent 17c672a
commit 8422db4
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/...d-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/App.svelte b/...d-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/App.svelte
@@ -2,14 +2,16 @@
 	import TodoList from './TodoList.svelte';
 
 	const todos = $state([
-		{ done: false, description: 'write some docs' },
-		{ done: false, description: 'start writing blog post' },
-		{ done: true, description: 'buy some milk' },
-		{ done: false, description: 'mow the lawn' },
-		{ done: false, description: 'feed the turtle' },
-		{ done: false, description: 'fix some bugs' }
+		{ id: 1, done: false, description: 'write some docs' },
+		{ id: 2, done: false, description: 'start writing blog post' },
+		{ id: 3, done: true, description: 'buy some milk' },
+		{ id: 4, done: false, description: 'mow the lawn' },
+		{ id: 5, done: false, description: 'feed the turtle' },
+		{ id: 6, done: false, description: 'fix some bugs' }
 	]);
 
+	let uid = todos.length + 1;
+
 	function remove(todo) {
 		const index = todos.indexOf(todo);
 		todos.splice(index, 1);
@@ -23,6 +25,7 @@
 			if (e.key !== 'Enter') return;
 
 			todos.push({
+				id: uid++,
 				done: false,
 				description: e.currentTarget.value
 			});

diff --git a/...lte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte b/...lte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <ul class="todos">
-	{#each todos as todo (todo)}
+	{#each todos as todo (todo.id)}
 		<li
 			class={{ done: todo.done }}
 		>

diff --git a/...lte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte b/...lte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <ul class="todos">
-	{#each todos as todo (todo)}
+	{#each todos as todo (todo.id)}
 		<li
 			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}

diff --git a/...vanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte b/...vanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <ul class="todos">
-	{#each todos as todo (todo)}
+	{#each todos as todo (todo.id)}
 		<li
 			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}