From 7c3a8c38937c8da07fedf573f2cab11217510fee Mon Sep 17 00:00:00 2001 From: Masen Furer Date: Tue, 9 Jun 2026 14:42:28 -0700 Subject: [PATCH] Update drag-and-drop rx.foreach example to use `key` prop --- docs/enterprise/drag-and-drop.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/enterprise/drag-and-drop.md b/docs/enterprise/drag-and-drop.md index 9edc26736b6..a89b5ea08cc 100644 --- a/docs/enterprise/drag-and-drop.md +++ b/docs/enterprise/drag-and-drop.md @@ -213,7 +213,10 @@ def state_tracking_example(): ### Dynamic Lists with Drag and Drop -Create dynamic draggable lists using `rx.foreach`: +Create dynamic draggable lists using `rx.foreach`. Always pass a stable item +identifier as the `key` prop to the outermost component rendered by the foreach +to ensure item identity is trackable as the item in the underlying list is +rearranged. ```python demo exec import dataclasses @@ -293,7 +296,10 @@ def droppable_list(title: str, items: list[ListItem], list_id: str): rx.vstack( rx.text(title, weight="bold", size="5"), rx.vstack( - rx.foreach(items, lambda item, index: draggable_list_item(item=item)), + rx.foreach( + items, + lambda item, index: draggable_list_item(item=item, key=item.id), + ), spacing="2", min_height="200px", width="100%",