I am trying to make nodes clickable and do some navigation. But the nodes dont take the click..
const CustomNodeComponent = ({ data }) => {
const handleNodeClick = () => {
alert('Node clicked: ' + data.label);
};
return (
<div
onClick={handleNodeClick}
style={{
cursor: 'pointer',
backgroundColor: 'orange',
borderRadius: '8px',
padding: '10px',
}}>
<Handle type="target" position={Position.Top} />
<Link to={`/courses`} className="cursor-pointer">
{data.label}
</Link>
<Handle type="source" position={Position.Bottom} />
</div>
);
};
I tried to use button onCLick onNodeCLick evrything nothing works.
here is the react flow component:
<div style={{ height: '100vh', width: '100%' }}>
<ReactFlow
nodes={nodes}
edges={edges}
nodeTypes={{ custom: CustomNodeComponent }}
elementsSelectable={true}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
minZoom={0.5}
maxZoom={2}>
<MiniMap />
<Controls />
<Background />
</ReactFlow>
</div>