Dynamic number of handle for custom node

Hi,

I try to custom a node, which would contain a + and - button and would add or remove a “connection ring”. I try something, the first connection ring appears, but not the following. And when I try to connect the first, I have an error.

First I show you my custom node. https://zupimages.net/viewer.php?id=21/44/30yf.png

CustomNode :

import React, { memo, useState } from 'react';
import { Handle, Position } from 'react-flow-renderer';
import Checkbox from '@mui/material/Checkbox';
import ButtonGroup from '@mui/material/ButtonGroup/ButtonGroup';
import Button from '@mui/material/Button/Button';

const IncNode = memo(({ isConnectable, sourcePosition, targetPosition, data, ...props }: any) => {

    const [targetArray, setTargetArray] = useState<any>([])

    const add = (type: string) => {
        let tmp = type + (targetArray.length + 1)
        setTargetArray([...targetArray, tmp])
    }

    return (
        <>
            {targetArray && targetArray.map((id: string, key: any) => (
                <Handle
                    key={key}
                    type="target"
                    position={targetPosition ? targetPosition : Position.Left}
                    id={id}
                    style={{ background: '#555' }}
                    isConnectable={isConnectable}
                />
            ))}

            <div style={{ display: "flex", justifyContent: "space-around", alignItems: "center" }}>
                <div style={{ flex: 1 }}>
                    <ButtonGroup
                        orientation="vertical"
                        aria-label="vertical outlined button group"
                        size="small"
                    >
                        <Button key="targetMore" onClick={() => add("T")}>+</Button>
                    </ButtonGroup>
                </div>
                <div style={{ flex: 2 }}>
                    <div style={{ fontWeight: 500, fontSize: 15 }}>{data.label}</div>
                </div>
        </>
    );
});

export default IncNode

I simplified the code by removing the icons, the less function, and the buttons on the right. When I try to connect the first connection ring I have this error :

The above error occurred in the <ConnectionLine> component:
    at ConnectionLine


cjs.js:12 Uncaught TypeError: Cannot read properties of null (reading 'find')
    at ConnectionLine (cjs.js:12)

How can I increase my number of connection rings, and that they work when I want to connect them ?

Thank you in advance for your answers

[Ipicky22]

Hi @moklick !

Thanks for your response, it’s awesome! She solves everything!

So I did :

const nodeId: string = props.id
...
useEffect(() => {
        updateNodeInternals(nodeId)
}, [sourceArray, targetArray])

Thank you for the documentation, although I looked for it in the issues, I had not found it.

But thanks to the word “updateNodeInternals” I found this issue (1038) which solves my problem as well …

Thanks again, and keep it up, ReactFlow is awesome.

[moklick]

Hey @Ipicky22

whenever you update the handles programatically you need to use the useUpdateNodeInternals hook to inform ReactFlow about the changes you made https://reactflow.dev/docs/api/hooks/#useupdatenodeinternals

In your component:

const updateNodeInternals = useUpdateNodeInternals();
...
<button onClick={() => updateNodeInternals('node-id-you-want-to-update')}>update internals</button>;