I have this code that defines structure of my navbar
const tabsStructure = [
{name: "File",
menu: [
{
name: "New",
onClick: () => {/*Toggle component*/}
},
{name: "Save",
menu: [
{
name: "Save to browser",
onClick: () => {/*Toggle component*/}
},
{
name: "Save JSON",
onClick: () => {/*Toggle component*/}
}
],
},
{
name: "Load",
onClick: () => {/*Toggle component*/}
}
]
},
{name: "Edit",
menu: [
{
name: "Resize",
onClick: () => {/*Toggle component*/}
}
]
}
];
export default tabsStructure;
That array of objects is being imported to one of the React components which properly generates HTML structure. I would want to add some functions for toggling other components, to some of the menu items (as you can see in my code). I would do that through setting proper states of common parent of both, the menu item and the component I want to toggle. However, from the scope of this file I don’t have access to other components, their states etc.
My question is: what is the best way of dealing with it? Should I move tabsStructure to the state of App component? If so, would it be possible to still keep it in separate file?
Here’s structure that my code generates:
structure
For example, I would like to toggle DocumentCreator through clicking on “New” menu item.