So I have this vanilla JS code that I'm trying to convert to React but I'm struggling with how to pass the parameters from the original editNode function down to the saveNodeData function.

The problem is that when the buttons are clicked callback is not a function because it is not being pass the original parameters from editNode.

Vanilla:

function editNode(data,callback) {

/more irrelevant code/
    document.getElementById("node-saveButton").onclick = saveNodeData.bind(this, data, callback);
    document.getElementById("node-cancelButton").onclick = cancelNodeEdit.bind(this, callback);
/more irrelevant code/
}

I already have bound the two functions for cancelNodeEdit and saveNodeData to two buttons as seen here:

<Button variant="contained" onClick={cancelNodeEdit}>Cancel</Button>
<Button variant="contained" onClick={saveNodeData}>Save</Button>

and here are the two functions I'm using:

function saveNodeData(data, callback) {
        data.label = nodeLabel;
        data.name = nodeName;
        data.description = nodeDescription;
        data.nodeType = nodeType;
        data.organization = organization;

        setNodeEditor(false);
        callback(data);
    }

const cancelNodeEdit = (callback) => {
        setNodeEditor(false);
        callback(null);
    };

I'd like to point out that this is for vis.js which uses callbacks to return the data to the manipulation object. https://visjs.github.io/vis-network/docs/network/manipulation.html#

Edit: This codepen actually demonstrates exactly what we currently have in the Vanilla version and I'm trying to figure out the conversion to React: https://codepen.io/NomuraS/pen/jZeVBg

Here's my Gist of the current code I have: https://gist.github.com/natetewelde/7545cf540229296228b8aa44c1de50c2

0

There are 0 best solutions below