I've inherited a React/Typescript web app. The designer put the button controls for the app in a row in a section below the chat. One of the control buttons pops up a menu of choices. Each choice should invoke a large RnD floating in-front window holding some content. The content depending on the choice from the menu.
The content component should somehow know which choice was made from the controls menu. The controls, menu and choices are not children, siblings or parents of the content component. The containers that encompass the controls do not encompass the content component. The choices menu is many components down from the App container. The content component can be a child where we like, but won't have access to the main App containers way above it, to create a large, in-front window.
I can't tell the designer he has to redesign the app because React doesn't work this way. He thought the user would like to see all the controls in a nice bunch, even though each one invokes different things.
Do I use a global variable to pass the choice of content from the menu click to the content component ? Nothing else needs this info. Why not do a global? Instead of HOC, getElementbyId, create context or store (which is basically a global that can only be accessed if declared)
Thanks!