From bd1dc85b9202c8ec6ca994177417574fdd71cbd7 Mon Sep 17 00:00:00 2001
From: Ava Johnson <ava.johnson@zohomail.com>
Date: Wed, 26 Jun 2024 20:19:18 -0700
Subject: [PATCH] fix(ReorderableList): avoid mutating props (#109)

Co-authored-by: AAGaming <aagaming@riseup.net>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 src/custom-components/ReorderableList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/custom-components/ReorderableList.tsx b/src/custom-components/ReorderableList.tsx
index 25b1fb1b..078e30ea 100644
--- a/src/custom-components/ReorderableList.tsx
+++ b/src/custom-components/ReorderableList.tsx
@@ -35,12 +35,12 @@ export type ReorderableListProps<T> = {
 export function ReorderableList<T>(props: ReorderableListProps<T>) {
   if (props.animate === undefined) props.animate = true;
   const [entryList, setEntryList] = useState<ReorderableEntry<T>[]>(
-    props.entries.sort((a: ReorderableEntry<T>, b: ReorderableEntry<T>) => a.position - b.position),
+    [...props.entries].sort((a: ReorderableEntry<T>, b: ReorderableEntry<T>) => a.position - b.position),
   );
   const [reorderEnabled, setReorderEnabled] = useState<boolean>(false);
 
   useEffect(() => {
-    setEntryList(props.entries.sort((a: ReorderableEntry<T>, b: ReorderableEntry<T>) => a.position - b.position));
+    setEntryList([...props.entries].sort((a: ReorderableEntry<T>, b: ReorderableEntry<T>) => a.position - b.position));
   }, [props.entries]);
 
   function toggleReorderEnabled(): void {