I have a global alert component that uses an alert context to show and hide itself when its isActive state is updated. I use it throughout my components in various places. I'm building a modal component that uses the alert component for displaying errors in the modal. The issue I'm running into is when an alert is triggered in the modal, it also appears in a component outside the modal window that uses the alert. What is the best way to handle this so the alert component is only shown in the context in which it was called?
Thank you
To me this sounds like there should be two different contexts, not only one.
I think the purpose of the alert component being global will be that it should handle all errors.
If the modal should handle it's own errors, then they probably should be in its own context.
If you want to re-use parts of the same code, you can still do that with component composition.
If there is some logic that should handle all errors (e.g. a global logger), that could be a separate component, which is independent of the display. (A third context is probably not needed, as the logging will have its own kind of storage.)