refactor(examples): enhance update node example

example/src/Basic/index.js

@@ -25,12 +25,9 @@ const BasicFlow = () => {
     setElements((elms) => {
       return elms.map((el) => {
         if (isNode(el)) {
-          return {
-            ...el,
-            position: {
-              x: Math.random() * 400,
-              y: Math.random() * 400,
-            },
+          el.position = {
+            x: Math.random() * 400,
+            y: Math.random() * 400,
           };
         }
 
@@ -46,10 +43,7 @@ const BasicFlow = () => {
     setElements((elms) => {
       return elms.map((el) => {
         if (isNode(el)) {
-          return {
-            ...el,
-            className: el.className === 'light' ? 'dark' : 'light',
-          };
+          el.className = el.className === 'light' ? 'dark' : 'light';
         }
 
         return el;

example/src/UpdateNode/index.js

@@ -8,20 +8,19 @@ const initialElements = [
   { id: 'e1-2', source: '1', target: '2' },
 ];
 
-const BasicFlow = () => {
+const UpdateNode = () => {
   const [elements, setElements] = useState(initialElements);
   const [nodeName, setNodeName] = useState('Node 1');
+  const [nodeBg, setNodeBg] = useState('#eee');
 
   useEffect(() => {
     setElements((els) =>
       els.map((el) => {
         if (el.id === '1') {
-          return {
-            ...el,
-            data: {
-              ...el.data,
-              label: nodeName,
-            },
+          // it's important that you create a new object here in order to notify react flow about the change
+          el.data = {
+            ...el.data,
+            label: nodeName,
           };
         }
 
@@ -30,13 +29,30 @@ const BasicFlow = () => {
     );
   }, [nodeName, setElements]);
 
+  useEffect(() => {
+    setElements((els) =>
+      els.map((el) => {
+        if (el.id === '1') {
+          // it's important that you create a new object here in order to notify react flow about the change
+          el.style = { ...el.style, backgroundColor: nodeBg };
+        }
+
+        return el;
+      })
+    );
+  }, [nodeBg, setElements]);
+
   return (
     <ReactFlow elements={elements} defaultZoom={1.5} minZoom={0.2} maxZoom={4}>
-      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
+      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4, fontSize: 12 }}>
+        <label style={{ display: 'block' }}>label:</label>
         <input value={nodeName} onChange={(evt) => setNodeName(evt.target.value)} />
+
+        <label style={{ display: 'block', marginTop: 10 }}>background:</label>
+        <input value={nodeBg} onChange={(evt) => setNodeBg(evt.target.value)} />
       </div>
     </ReactFlow>
   );
 };
 
-export default BasicFlow;
+export default UpdateNode;

example/src/index.js

@@ -16,7 +16,7 @@ import EdgeTypes from './EdgeTypes';
 import CustomConnectionLine from './CustomConnectionLine';
 import NodeTypeChange from './NodeTypeChange';
 import UpdatableEdge from './UpdatableEdge';
-import UpdateLabel from './UpdateLabel';
+import UpdateNode from './UpdateNode';
 
 import './index.css';
 
@@ -86,9 +86,9 @@ const routes = [
     label: 'Updatable Edge',
   },
   {
-    path: '/update-label',
-    component: UpdateLabel,
-    label: 'Update Label',
+    path: '/update-node',
+    component: UpdateNode,
+    label: 'Update Node',
   },
 ];