class TodoListWithKey extends Component
{
public $todos = [];
public function moveUp($todoId) { /* reorder logic */ }
public function moveDown($todoId) { /* reorder logic */ }
public function deleteTodo($todoId) { /* delete logic */ }
}
@foreach($todos as $index => $todo)
<div wire:key="todo-{{ $todo['id'] }}" class="flex items-center justify-between p-3 bg-gray-50 rounded-md border">
<div class="flex items-center flex-1">
<input
type="checkbox"
wire:click="toggleTodo({{ $todo['id'] }})"
{{ $todo['completed'] ? 'checked' : '' }}
class="mr-3"
>
<span class="{{ $todo['completed'] ? 'line-through text-gray-500' : '' }}">
{{ $todo['text'] }}
</span>
<input
type="text"
placeholder="Type something - state preserved!"
class="ml-3 px-2 py-1 text-xs border border-gray-300 rounded w-40"
>
</div>
<div class="flex space-x-1">
<button wire:click="moveUp({{ $todo['id'] }})">↑</button>
<button wire:click="moveDown({{ $todo['id'] }})">↓</button>
<button wire:click="deleteTodo({{ $todo['id'] }})">Delete</button>
</div>
</div>
@endforeach
CORRECT: Stable wire:key="todo-{{ $todo['id'] }}" using the todo ID!