Foreign Object is not working in my project

[joeyhe24]

Hello,
I tested your project and want to use customized node label, but I don't see it working at all

Step 1: In component

`

function DagreFlow(props){

console.log(props)
const traceRoutes = new TraceRoutes(props.data);
console.log(traceRoutes.traceRoutes[0])

const [state, setState] = useState(false);
setTimeout(()=>{
    setState({
        nodes: traceRoutes.traceRoutes[0]['hops']['graph'].nodes,
        edges: traceRoutes.traceRoutes[0]['hops']['graph'].edges,
        customNodeLabels: {
            foreign: {
                renderer: NodeLabelRender,
                html: true
            }
        },
        customEdgeLabels: {
            foreign: {
                renderer: EdgeLabelRender,
                html: true
            }
        }
    })
});


return (
    state &&
    <svg id="schedule" width={1000} height={1000}>
        <DagreReact
            nodes={state.nodes}
            edges={state.edges}
            customNodeLabels = {state.customNodeLabels}
            customEdgeLabels = {state.customEdgeLabels}
            defaultNodeConfig={DEFAULT_NODE_CONFIG}
            graphOptions={{
                marginx: 15,
                marginy: 15,
                rankdir: 'LR',
                ranksep: 55,
                nodesep: 15,
            }}
        />
    </svg>
);

}

export default DagreFlow;
`

and the customNodeLabel:

import React, {useRef} from 'react'; function NodeLabelRender(props){ return( <div>NodeX</div> ) } export default NodeLabelRender;
But when rendering it, it is still the same as without customer node label render, only default label is rendered, not the foreign object at all,

can you check the issue here?

[bobthekingofegypt]

Apologies, I missed the notification for this.

I would guess that the problem is setTimeout. The library would not be picking up a change to the renderers. Try setting the renders to their value directly, not through state, and only modifying the data entries. It's also safer to use the stage variable when changing nodes and edges to forces a new layout pass.