I’m new to React and have been trying it out with Meteor 1.3 with great joy.
However, I’ve reached a problem that I’m not sure how best to solve, and I couldn’t find anything related:
Imagine I want to display a notification “Concept added” / “Concept edited” when the user adds/edits a concept record. I’m using Material UI and its snackbar component for that.
Ideally, I’d like to have a global function as with S-Alert ala
sAlert.info('Concept added'), but of course in React it does not seem to be this easy. I have to have a real React Component for each possible snackbar (
<SnackBar message="..." />) and manage it’s visible state manually.
I can’t just put it with the form, since I will also change the route after the form is submitted!
So… Where do I put it? Probably somewhere up high in the hierarchy. But how do I trigger the snackbar from all the way down in some form component?
Let’s say I add a
Snackbars component to my page that includes a
<Snackbar> for all possible messages, and a method
trigger(type) that I can pass elsewhere. Do I have to really pass this all the way down to every single component that might be calling it?
Or, the other way: Say I add the snackbar in the view that the user gets redirected to after submitting the form. How does the view know to display it? How do I trigger it from the (destroyed) form view?