Passing Arrays within Arrays

Question

Im using React, and here is a shrunk default set of props Im passing a component:

getDefaultProps : function () {
    return (
    {
        toolbarAttr : [
            firstToolbar : [
                {
                    ctrlId : 'ctrlNewTem',
                    ctrlClass : 'ctrl',
                    ctrlDataAction : '',
                    ctrlDataTooltip : 'New Template'
                }       
            ],
            secondToolbar : [
                {
                    ctrlId : 'ctrlGrpSelect',
                    ctrlClass : 'ctrl',
                    ctrlDataAction : '',
                    ctrlDataTooltip : 'Select / Group Select'
                },
                {
                    ctrlId : 'ctrlDrawShapes',
                    ctrlClass : 'ctrl',
                    ctrlDataAction : '',
                    ctrlDataTooltip : 'Draw Shapes'
                }                   
            ],
            thirdToolbar : [
                {
                    ctrlId : 'ctrlZoomOut',
                    ctrlClass : 'ctrl',
                    ctrlDataAction : '',
                    ctrlDataTooltip : 'Zoom Out'
                },
                {
                    ctrlId : 'ctrlPan',
                    ctrlClass : 'ctrl',
                    ctrlDataAction : '',
                    ctrlDataTooltip : 'Pan'
                }                   
            ],
            fourthToolbar : [
                {
                    ctrlId : 'ctrlTemSide',
                    ctrlClass : 'ctrl',
                    ctrlDataAction : '',
                    ctrlDataTooltip : 'Front / Back Template'
                }
            ]
        ]
    });
},

In a nutshell, I have a props object, which has an array, composed of lots of child arrays, within the child array, I have objects. This is being reported as 'syntax error', why?

• The 'syntax error' is being reported on 'firstToolbar' array object.

Also, is this a good design pattern? Recommendations would be much appreciated.

Thank you

Answer 1

firstToolBar cannot directly come inside toolbarAttr since toolbarAttr is an array not object.

make it an object

toolbarAttr : { //replace [ with {
  ... //all the other props here
} // replace ] with }