How to update the data of custom-nodes using a text input?

[paulano1]

I have a custom node component and depending on the input, I want to update the data attribute of the node and do a similar operation for edges.

`export function MidNode(props: NodeProps) {
const onChange = useCallback((evt) => {
//
}, []);

return (
	<>
		<div className="custom-node">
			<Handle type="target" position={Position.Top} />
			<div className="input">
				<input
			</div>
			<Handle type="source" position={Position.Bottom} />
		</div>
	</>
);

}`

[bcakmakoglu]

You can use useReactFlow (given you have wrapped your App in the ReactFlowProvider) from inside your custom node.

  const updateData = () => {
    instance.setNodes((nodes) =>
      nodes.map((node) => {
        if (node.id === id) {
			return {
				...node,
				data: {
					inputVal,
				}
			}
		}

        return node;
      })
    );
  };

[jamiekariuki]

please explain more on this, i have a project and i am stack

[bcakmakoglu]

Sure, so there is this hook called useReactFlow, which provides some very helpful functions to handle state updates, like setNodes.

In order to use useReactFlow you need to use the ReactFlowProvider first, so that you have an accessible context instance otherwise you can't call useReactFlow (you'll get a warning about not having used Zustand in an ancestor first).

So here's a simple example:

// App.tsx
import { ReactFlowProvider } from "reactflow";
import Flow from "./Flow";

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      	<ReactFlowProvider>
			<Flow />
		</ReactFlowProvider>
    </div>
  );
}

After that you can use useReactFlow inside any component that is inside the tree of ReactFlowProvider, like a custom node component for example.

// CustomNode.tsx

import { memo, type ChangeEventHandler } from "react";
import { Handle, type NodeProps, Position, useReactFlow } from "reactflow";

const CustomNode = ({
  id,
  data,
  isConnectable,
  targetPosition = Position.Top,
  sourcePosition = Position.Bottom
}: NodeProps) => {
  const { setNodes } = useReactFlow();

  const updateData: ChangeEventHandler<HTMLInputElement> = (evt) => {
    const inputVal = (evt.target as HTMLInputElement).value;

    setNodes((nodes) =>
      nodes.map((node) => {
        if (node.id === id) {
          return {
            ...node,
            data: {
              ...node.data,
              inputVal
            }
          };
        }

        return node;
      })
    );
  };

  return (
    <>
      <Handle
        type="target"
        position={targetPosition}
        isConnectable={isConnectable}
      />

      <input style={{ marginBottom: '1rem' }} value={data.inputVal} onChange={updateData} />

      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
        Data: 
        {
          Object.entries(data).map(([key, val]) => 
          (
              <>
              <div>Key: {key}</div>
              <div>Value: {val}</div>
              </>
            )
          )
        }
      </div>
      <Handle
        type="source"
        position={sourcePosition}
        isConnectable={isConnectable}
      />
    </>
  );
};

CustomNode.displayName = "CustomNode";

export default memo(CustomNode);

Here's a sandbox example.

[jamiekariuki]

Thank you so much, this was a life saver man