react-flow | Highly customizable library for building an interactive node | Chart library

Hi I'm still new to redux and I'm trying to manipulate the nodes in reactflow library using redux, I've managed to add a node through a reducer but when I try to add an edge(the link between nodes) it returns a warning can anyone helps me with how to handle it in reducer

Link to sandbox if you want to see the code https://codesandbox.io/s/react-flow-add-node-button-with-redux-1q2dz?file=/src/store/reducer.js

warning image

i am working on react-flow, and my task is to transform the following data => `

I am using the following div to generate the attached picture. Is there a recommended way to get the the two icons to align?

This is a beginner react question as I am learning.

I have two files hero.js and sidebar.js. There are two functions I have in hero.js that need to be accessed from buttons in sidebar.js (namely: onSave and onRestore).

How do I pass those functions down. I realize I probably need to do something like `this.onSave' but not sure how as still new to react.

hero.js

I'm having issues with deleting elements in react-flow via a button.

I can delete elements fine using Backspace but the button only works for the first delete and after that it brings back the deleted node.

New to using react-flow and can't put my finger on the problem here. Is the state not getting changed some how?

Below is the code I use for react flow

CodeSandbox here.

I am very new to react.js (and somewhat new to javascript) so apologies in advance.

I am looking at this example here:

https://reactflow.dev/examples/drag-and-drop/

I believe that matches up to the git repo here:

https://github.com/wbkd/react-flow/tree/main/example/src/DragNDrop

I would like to modify the code so instead of the text being "input", "default", "output", I would like it to be "alpha", "beta" "gamma".

I realize I should be able to set the label as shown in line 19 here:

https://github.com/wbkd/react-flow/blob/main/example/src/DragNDrop/index.tsx

However, in the onDragStart method shown here: https://github.com/wbkd/react-flow/blob/main/example/src/DragNDrop/Sidebar.tsx

They call a event.dataTransfer.setData('application/reactflow', nodeType); . I'm not quite sure how to change hat to set the "label".

Any help would be much appreciated, especially for a beginner in react. Thanks!

I have this tree:

Given an array of connected elements, how can I make an array of children?

Documentation: https://reactflow.dev/docs/api/nodes/

Example from documentation: https://reactflow.dev/examples/custom-node/

Steps to reproduce bug:

1. Move any node to around by dragging and dropping
2. Select the top edge handle of the node you just moved around
3. Drag the edge out, and notice how the bottom edge is selected not the top edge

Expected behaviour: in step 3, the top edge should be dragged out not the bottom edge

Code sandbox: https://codesandbox.io/s/react-flow-forked-xebwl?file=/src/App.tsx

I followed exactly as the documentation and example, yet my implementation has a strange tendency to pick up the bottom edge no matter which edge I select. This issue has not been raised in react-flow's official github issue page, so I'm assuming I'm doing something wrong. Can someone figure out why this behaviour is happening and how to fix it?