reactjsreact-flow

Why edges doesn't render in react flow?


I am new at react flow. My goal is connect to nodes with same type. I want to have one template for node and use it everywhere. Below simple example, but edges doesn't appear.

If i remove type in nodes everything fine.

import { useCallback, useState } from "react";
import "reactflow/dist/style.css";
import TextUpdaterNode from "./TextUpdaterNode.js";
import "./text-updater-node.css";

const rfStyle = {
  backgroundColor: "#B8CEFF"
};

const initialNodes = [
  {
    id: "1",
    position: { x: 0, y: 0 },
    type: "textUpdater"
  },
  {
    id: "2",
    position: { x: 0, y: 100 },
    type: "textUpdater"
  }
];

const initialEdges = [{ id: "e1-2", source: "1", target: "2", animated: true }];

const nodeTypes = { textUpdater: TextUpdaterNode };

function Flow() {
  return (
    <ReactFlow
      nodes={initialNodes}
      edges={initialEdges}
      nodeTypes={nodeTypes}
      fitView
      style={rfStyle}
    />
  );
}

export default Flow;

Solution

  • To solve your issue, you need to ensure that TextUpdaterNode component is correctly implemented and to register the custom node type in the nodeTypes prop of ReactFlow.

    TextUpdaterNode:

    import React from 'react';
    import { Handle, Position } from 'reactflow';
    
    const TextUpdaterNode = ({ data }) => {
      return (
        <div className="text-updater-node">
          <Handle type="target" position={Position.Top} />
          <div>{data.label}</div>
          <Handle type="source" position={Position.Bottom} />
        </div>
      );
    };
    
    export default TextUpdaterNode;
    
    

    For flow.js:

    import React from 'react';
    import ReactFlow from 'reactflow';
    import 'reactflow/dist/style.css';
    import TextUpdaterNode from './TextUpdaterNode';
    import './text-updater-node.css';
    
    const rfStyle = {
      backgroundColor: '#B8CEFF',
    };
    
    const initialNodes = [
      {
        id: '1',
        position: { x: 0, y: 0 },
        type: 'textUpdater',
        data: { label: 'Node 1' },
      },
      {
        id: '2',
        position: { x: 0, y: 100 },
        type: 'textUpdater',
        data: { label: 'Node 2' },
      },
    ];
    
    const initialEdges = [
      { id: 'e1-2', source: '1', target: '2', animated: true },
    ];
    
    const nodeTypes = { textUpdater: TextUpdaterNode };
    
    function Flow() {
      return (
        <ReactFlow
          nodes={initialNodes}
          edges={initialEdges}
          nodeTypes={nodeTypes}
          fitView
          style={rfStyle}
        />
      );
    }
    
    export default Flow;
    

    You can also add the following CSS:

    .text-updater-node {
      padding: 10px;
      border: 1px solid #ddd;
      background: #fff;
      border-radius: 3px;
    }