I am trying to convert a web-app from vanilla JS to react. The web-app has what I call a color Manager which is basically a lookup table that allows the app to look up a color that has not been used yet, to assign it to various elements located in different components. Since I do not know much about React, yet, I was wondering whether someone in the community has an idea of how to do this optimally. I'd rather not use callbacks to pass the information from a single child where a new color assignment happened to the parent to then pass the change in the color lookup table down to the other children again.
Here's a screenshot of the vanilla JS web-app so you can get an idea of the different components and the color changes that need to be made in these components 'parallelly'.
Thanks so much for your help!
It seems to me that you are looking for some form of state management. Naturally I would recommend Redux. But that might be an overkill for your app (Not familiar with all info about it.) In that case, you might take a look at React Context
What these 2 modules do is keep a global state which can be injected into any component, child or parent, as long as they are all inside some form of a Provider.
Take a look at a simple example between day/night global variable switch, which can then be accessed from child or parent components as well
