Updating sortable example to use useState setter as function (#3360)

* fix: use setState function in moveCard * chore: cut semver
react-dnd · Feb 3, 2022 · cfcb708 · cfcb708
1 parent d01796c
commit cfcb708
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 23 deletions.
diff --git a/.yarn/versions/384c56c3.yml b/.yarn/versions/384c56c3.yml
@@ -0,0 +1,2 @@
+declined:
+  - react-dnd-examples
diff --git a/packages/examples/src/04-sortable/simple/Container.tsx b/packages/examples/src/04-sortable/simple/Container.tsx
@@ -48,33 +48,32 @@ export const Container: FC = () => {
 			},
 		])
 
-		const moveCard = useCallback(
-			(dragIndex: number, hoverIndex: number) => {
-				const dragCard = cards[dragIndex]
-				setCards(
-					update(cards, {
-						$splice: [
-							[dragIndex, 1],
-							[hoverIndex, 0, dragCard],
-						],
-					}),
+		const moveCard = useCallback((dragIndex: number, hoverIndex: number) => {
+			setCards((prevCards: Item[]) =>
+				update(prevCards, {
+					$splice: [
+						[dragIndex, 1],
+						[hoverIndex, 0, prevCards[dragIndex]],
+					],
+				}),
+			)
+		}, [])
+
+		const renderCard = useCallback(
+			(card: { id: number; text: string }, index: number) => {
+				return (
+					<Card
+						key={card.id}
+						index={index}
+						id={card.id}
+						text={card.text}
+						moveCard={moveCard}
+					/>
 				)
 			},
-			[cards],
+			[],
 		)
 
-		const renderCard = (card: { id: number; text: string }, index: number) => {
-			return (
-				<Card
-					key={card.id}
-					index={index}
-					id={card.id}
-					text={card.text}
-					moveCard={moveCard}
-				/>
-			)
-		}
-
 		return (
 			<>
 				<div style={style}>{cards.map((card, i) => renderCard(card, i))}</div>