Edges are not rendering in my ReactFlow component

Question

So my edges are not rendering (nodes work just fine), here are the checks that I have made:

there is not any issue with id's, they are strings and they match the nodes ids
the custom nodes work fine
there is no issue with fitview (edges do not show even if I disable it)
style to edges doesn't change anything
my global.css has no impact
the div containing the ReactFlow component is not a problem

here is the code for my graph:

const nodeTypes = {
  problemNode: ProblemNode,
};

export default function PlanGraph(plan: Plan | undefined) {
  const nodes: Node[] = [];
  const edges: Edge[] = [];
  let centerY = window.innerWidth / 2 - 800;
  const centerX = window.innerWidth / 2 - 300;
  plan?.problems.forEach((problem) => {
    nodes.push({
      id: problem[1].id.toString(),
      type: "problemNode",
      position: { x: centerX, y: centerY },
      data: {
        number: problem[1].id,
        name: problem[1].name,
        acceptanceRate: problem[1].acceptanceRate,
        difficulty: problem[1].difficulty,
      },
    });
    centerY += 125;
  });
  for (let i = 0; i < plan!.problems.length - 1; i++) {
    const current = plan!.problems[i][1];
    const next = plan!.problems[i + 1][1];

    edges.push({
      id: `${current.id}-${next.id}`,
      source: current.id.toString(),
      target: next.id.toString(),
      style: { stroke: "#10B981", strokeWidth: 2, width: 12 },
    });
  }

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      nodeTypes={nodeTypes}
      fitView
    ></ReactFlow>
  );
}

globals.css:

@import "tailwindcss";

@theme {
    --color-white: #eeeeee;
    --color-darkgrey: #222831;
    --color-lightgrey: #3f444c;
    --color-lightgreen: #76abae;
    --color-orange: #ffa116;
}

customNode:

export default function ProblemNode({
  data: { number, name, acceptanceRate, difficulty },
}: NodeProps<{
  number: number;
  name: string;
  acceptanceRate: number;
  difficulty: number;
}>) {
  let borderColorClass: string;
  switch (difficulty) {
    case 0:
      borderColorClass = "border-green-500";
      break;
    case 1:
      borderColorClass = "border-orange-500";
      break;
    case 2:
      borderColorClass = "border-red-500";
      break;
    default:
      borderColorClass = "border-gray-500";
  }
  return (
    <div
      className={`bg-lightgrey border-2 ${borderColorClass} rounded-lg p-4 w-80`}
    >
      <p className="text-white font-semibold">
        {number.toString() + ". " + name}
      </p>
    </div>
  );
}

dependencies:

  "dependencies": {
    "next": "15.2.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-icons": "^5.5.0",
    "reactflow": "^11.11.4"
  },

Matin Khani · Accepted Answer · 2025-06-03 20:19:26Z

0

First install the @xyflow/react package. Then use the special hooks for nodes and edges:

const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)

The initialNodes and initialEdges is looks like this:

const initialNodes: Node[] = [];
const initialEdges: Edge[] = [];

And then you can use setNodes and setEdge whenever you want.

You can read more of this package in documentation.

Let me know if you more information or if this solution was not worked for you

answered Jun 3 at 20:19

Matin Khani

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Edges are not rendering in my ReactFlow component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related