From b003d50bea2e7a35e959b3b181e56cf0f625ba50 Mon Sep 17 00:00:00 2001
From: Vasily Strelyaev <Vasily.Strelyaev@devexpress.com>
Date: Thu, 18 Jan 2024 17:24:10 +0200
Subject: [PATCH 1/2] fix the Sortable > Customization demo

---
 JSDemos/Demos/Sortable/Customization/React/App.tsx  | 2 +-
 JSDemos/Demos/Sortable/Customization/ReactJs/App.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/JSDemos/Demos/Sortable/Customization/React/App.tsx b/JSDemos/Demos/Sortable/Customization/React/App.tsx
index 00298ebfead..8ee27d59936 100644
--- a/JSDemos/Demos/Sortable/Customization/React/App.tsx
+++ b/JSDemos/Demos/Sortable/Customization/React/App.tsx
@@ -73,7 +73,7 @@ const App = () => {
   }, [setHandle]);
 
   const onDragTemplateChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
-    setDragComponent(e.value ? DragItem : null);
+    setDragComponent(e.value ? () => DragItem : null);
     setCursorOffset(e.value ? { x: 10, y: 20 } : null);
   }, [setDragComponent, setCursorOffset]);
 
diff --git a/JSDemos/Demos/Sortable/Customization/ReactJs/App.js b/JSDemos/Demos/Sortable/Customization/ReactJs/App.js
index 00a6c83c9b9..0fbf823bad0 100644
--- a/JSDemos/Demos/Sortable/Customization/ReactJs/App.js
+++ b/JSDemos/Demos/Sortable/Customization/ReactJs/App.js
@@ -86,7 +86,7 @@ const App = () => {
   );
   const onDragTemplateChanged = useCallback(
     (e) => {
-      setDragComponent(e.value ? DragItem : null);
+      setDragComponent(e.value ? () => DragItem : null);
       setCursorOffset(e.value ? { x: 10, y: 20 } : null);
     },
     [setDragComponent, setCursorOffset],

From 5a0cd6027436a61e66a58f8d03ca5adb3d162fc9 Mon Sep 17 00:00:00 2001
From: Vasily Strelyaev <Vasily.Strelyaev@devexpress.com>
Date: Fri, 19 Jan 2024 12:14:45 +0200
Subject: [PATCH 2/2] save a flag not a component in the state

---
 JSDemos/Demos/Sortable/Customization/React/App.tsx  | 8 ++++----
 JSDemos/Demos/Sortable/Customization/ReactJs/App.js | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/JSDemos/Demos/Sortable/Customization/React/App.tsx b/JSDemos/Demos/Sortable/Customization/React/App.tsx
index 8ee27d59936..ccba52ad879 100644
--- a/JSDemos/Demos/Sortable/Customization/React/App.tsx
+++ b/JSDemos/Demos/Sortable/Customization/React/App.tsx
@@ -29,7 +29,7 @@ const App = () => {
   const [scrollSpeed, setScrollSpeed] = useState(30);
   const [scrollSensitivity, setScrollSensitivity] = useState(60);
   const [handle, setHandle] = useState('');
-  const [dragComponent, setDragComponent] = useState(null);
+  const [useDragComponent, setUseDragComponent] = useState(false);
   const [cursorOffset, setCursorOffset] = useState(null);
 
   const onDragStart = useCallback((e: SortableTypes.DragStartEvent) => {
@@ -73,9 +73,9 @@ const App = () => {
   }, [setHandle]);
 
   const onDragTemplateChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
-    setDragComponent(e.value ? () => DragItem : null);
+    setUseDragComponent(!!e.value);
     setCursorOffset(e.value ? { x: 10, y: 20 } : null);
-  }, [setDragComponent, setCursorOffset]);
+  }, [setUseDragComponent, setCursorOffset]);
 
   return (
     <div id="demo-container">
@@ -94,7 +94,7 @@ const App = () => {
             scrollSpeed={scrollSpeed}
             scrollSensitivity={scrollSensitivity}
             handle={handle}
-            dragComponent={dragComponent}
+            dragComponent={useDragComponent ? DragItem : null}
             cursorOffset={cursorOffset}
             onDragStart={onDragStart}
             onReorder={onReorder}
diff --git a/JSDemos/Demos/Sortable/Customization/ReactJs/App.js b/JSDemos/Demos/Sortable/Customization/ReactJs/App.js
index 0fbf823bad0..e44d5caeb9c 100644
--- a/JSDemos/Demos/Sortable/Customization/ReactJs/App.js
+++ b/JSDemos/Demos/Sortable/Customization/ReactJs/App.js
@@ -27,7 +27,7 @@ const App = () => {
   const [scrollSpeed, setScrollSpeed] = useState(30);
   const [scrollSensitivity, setScrollSensitivity] = useState(60);
   const [handle, setHandle] = useState('');
-  const [dragComponent, setDragComponent] = useState(null);
+  const [useDragComponent, setUseDragComponent] = useState(false);
   const [cursorOffset, setCursorOffset] = useState(null);
   const onDragStart = useCallback(
     (e) => {
@@ -86,10 +86,10 @@ const App = () => {
   );
   const onDragTemplateChanged = useCallback(
     (e) => {
-      setDragComponent(e.value ? () => DragItem : null);
+      setUseDragComponent(!!e.value);
       setCursorOffset(e.value ? { x: 10, y: 20 } : null);
     },
-    [setDragComponent, setCursorOffset],
+    [setUseDragComponent, setCursorOffset],
   );
   return (
     <div id="demo-container">
@@ -108,7 +108,7 @@ const App = () => {
             scrollSpeed={scrollSpeed}
             scrollSensitivity={scrollSensitivity}
             handle={handle}
-            dragComponent={dragComponent}
+            dragComponent={useDragComponent ? DragItem : null}
             cursorOffset={cursorOffset}
             onDragStart={onDragStart}
             onReorder={onReorder}