From f06509e9042a852cc94bfabfb3d41a95250c17a8 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Mon, 29 May 2023 20:08:37 +1000
Subject: [PATCH] Getting Started -> Adding Interactivity -> Handle
 Connections: use setEdges function and addEdge function to handle
 interactivity that connecting nodes manually

---
 src/App.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index dfd5a1f..9353f00 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,14 +4,13 @@ import ReactFlow, {
   Controls,
   applyEdgeChanges,
   applyNodeChanges,
+  addEdge,
 } from 'reactflow';
 
 // we have to import the React Flow styles for it to work
 import 'reactflow/dist/style.css';
 
-const initialEdges = [
-  { id: '1-2', source: '1', target: '2', label: 'to the', type: 'step' },
-];
+const initialEdges = [];
 
 const initialNodes = [
   {
@@ -40,6 +39,11 @@ const Flow = () => {
     [],
   );
 
+  const onConnect = useCallback(
+    params => setEdges(eds => addEdge(params, eds)),
+    [],
+  );
+
   return (
     <div style={{ height: '100vh' }}>
       <ReactFlow
@@ -47,6 +51,7 @@ const Flow = () => {
         onNodesChange={onNodesChange}
         edges={edges}
         onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
       >
         <Background />
         <Controls />