From 5fa95c2413b9cd8898a3270ee76908f248d6dda5 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 8 Jan 2024 15:02:09 +0100
Subject: [PATCH] chore(react): add multi-setnodes example

---
 .../src/examples/MultiSetNodes/index.tsx      | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 examples/react/src/examples/MultiSetNodes/index.tsx

diff --git a/examples/react/src/examples/MultiSetNodes/index.tsx b/examples/react/src/examples/MultiSetNodes/index.tsx
new file mode 100644
index 00000000..f05c2b50
--- /dev/null
+++ b/examples/react/src/examples/MultiSetNodes/index.tsx
@@ -0,0 +1,87 @@
+import { useCallback } from 'react';
+import {
+  ReactFlow,
+  Controls,
+  addEdge,
+  Connection,
+  useNodesState,
+  useEdgesState,
+  Background,
+  Node,
+  Edge,
+  Panel,
+  useReactFlow,
+  ReactFlowProvider,
+} from '@xyflow/react';
+
+const initNodes: Node[] = [
+  {
+    id: '1',
+    data: {
+      label: 'hallo',
+    },
+    position: { x: 0, y: 0 },
+  },
+  {
+    id: '2',
+    data: {
+      label: 'world',
+    },
+    position: { x: 200, y: 0 },
+  },
+];
+
+const initEdges: Edge[] = [];
+
+const CustomNodeFlow = () => {
+  const { setNodes } = useReactFlow();
+  const [nodes, , onNodesChange] = useNodesState(initNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
+
+  const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
+
+  const updateNodes = () => {
+    setNodes((nds) =>
+      nds.map((n) => {
+        if (n.id === '1') {
+          return { ...n, data: { label: 'updated' } };
+        }
+
+        return n;
+      })
+    );
+
+    setNodes((nds) =>
+      nds.map((n) => {
+        if (n.id === '2') {
+          return { ...n, data: { label: 'updated' } };
+        }
+
+        return n;
+      })
+    );
+  };
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      fitView
+    >
+      <Controls />
+      <Background />
+      <Panel>
+        <button onClick={updateNodes}>update nodes</button>
+      </Panel>
+    </ReactFlow>
+  );
+};
+
+export default () => (
+  <ReactFlowProvider>
+    <CustomNodeFlow />
+  </ReactFlowProvider>
+);