How can I dynamically add items in a submenu?

[lilfrootyloops]

Description: In my Next.js application, I am trying to create a submenu that is dynamically updated to include specific options depending on what kind of node has been selected. The values for the submenu items are already being passed into the overarching menu via an evt object. I have tried using submenu.push(); however, I am running into the following error:

Syntax error: Unexpected token, expected ","

Before putting together functionality within the push() method to dynamically grab items from evt to create objects out of them, I tried running the push() method on pre-defined objects to test whether this concept would work in general; however, it did not for me. I'd really appreciate it if someone could point out what I may have been doing wrong and explain how I can dynamically add items in a submenu — if it's possible. I've included my code below:

Code:

const options = {
    evtType: 'cxttap',
    menuItems: [
        {
            id: 'one',
            content: 'This is the first option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'one')
            },
        },
        {
            id: 'two',
            content: 'This is the second option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'two')
            },
        },
        {
            id: 'three',
            content: 'This is the third option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                console.log(evt.target.data('properties'));
            },
            submenu: [
                {
                    id: 'submenuOne',
                    content: 'This is the first option in the submenu',
                    tooltipText: 'blue',
                    onClickFunction: function () {
                        console.log("The first option in the submenu was clicked on")
                    },
                },
                {
                    id: 'submenuTwo',
                    content: 'This is the second option in the submenu',
                    tooltipText: 'blue',
                    onClickFunction: function () {
                        console.log("The second option in the submenu was clicked on")
                    },
                },
            ],
            submenu.push(
                {
                    id: 'submenuThree',
                    content: 'This should be the third option in the submenu',
                    tooltipText: 'blue',
                    onClickFunction: function () {
                        console.log("The third option in the submenu was clicked on")
                    },
                },
            ),
        },
    ],
};

Additional Context I am using Cytoscape Context Menus v4.1.0.

[canbax]

@lilfrootyloops Firstly, you cannot push while defining an object. submenu.push This call not be inside the object definition.

Secondly, if you read the API and documentation, you will see an appendMenuItems this might be best way to append new items dynamically.