Idiomatic way to handle Message Alerts state in React and Material-UI - reactjs

Question

I basically am building a web application using react and material UI. I have a registration form.
When this registration form successfully submits, it should display a success message at the top of the page.
Now, I have cordoned off the top of every page to show the MyAlert component. I have done this to make my site more consistent. Basically whenever there is a message to show to the user, it will render there.
Now, the issue is once the message is shown, if I navigate around my site, there is no way to turn it off.
Could someone please help explain what the best way to show a message once, then hide it would be? Basically once the user registers successfully, show a success message. Once the user navigates to a new page, hide the message at the top until a new message needs to be shown.
I imagine this is a very common design pattern, so I must be missing something in terms of React knowledge. Even best practice design patterns, or links to how it can be handled would be appreciated.
My toy app looks as follows:
App.jsx
import * as React from 'react'
import { useState, useEffect } from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import { Link } from 'react-router-dom'
import { Alert } from '#material-ui/lab'
import MenuIcon from '#material-ui/icons/Menu'
import {
Button,
AppBar,
Toolbar,
IconButton,
Typography,
makeStyles,
Container,
} from '#material-ui/core'
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}))
const Navbar = (props) => {
const classes = useStyles()
return (
<div>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
>
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
<Button color="inherit" component={Link} to={'/'}>
My App
</Button>
</Typography>
<Button color="inherit" component={Link} to={'/register'}>
Register
</Button>
</Toolbar>
</AppBar>
</div>
)
}
const Register = (props) => {
const classes = useStyles()
const { setShowAlert, setAlertMessage, setAlertSeverity } = props
useEffect(() => {
console.log('use effected')
}, [])
const handleRegistration = () => {
setAlertMessage(
'You have succesfully registered! Please check your email for a verification link.'
)
setAlertSeverity('success')
setShowAlert(true)
}
return (
<Container maxWidth="sm" align="center" className={classes.root}>
This is some kind of form. I have redacted all input fields to
illustrate the issue more clearly.<br></br>
<Button
variant="contained"
color="primary"
onClick={handleRegistration}
>
Register
</Button>
</Container>
)
}
const MyAlert = (props) => {
const { severity, message } = props
return <Alert severity={severity}>{message}</Alert>
}
const App = () => {
const [alertSeverity, setAlertSeverity] = useState('')
const [alertMessage, setAlertMessage] = useState('')
const [showAlert, setShowAlert] = useState(false)
return (
<BrowserRouter>
<div className="app">
<Navbar />
<div>{showAlert ? 'true' : 'false'}</div>
{showAlert ? (
<MyAlert severity={alertSeverity} message={alertMessage} />
) : (
''
)}
<Switch>
<Route
path="/register"
render={(props) => (
<Register
{...props}
setShowAlert={setShowAlert}
setAlertMessage={setAlertMessage}
setAlertSeverity={setAlertSeverity}
/>
)}
/>
</Switch>
</div>
</BrowserRouter>
)
}
export default App
index.jsx
import * as React from "react"
import { render } from "react-dom"
import App from './App';
render(<App />, document.getElementById("app"))

Answer 1

Wouldn't that just be the case of using a setTimeout? When MyAlert is rendered, show it for 5 seconds and then dismiss.
First, pass it as a prop to your component (I also proposed a slightly different conditional render):
<BrowserRouter>
<div className="app">
<Navbar />
<div>{showAlert ? 'true' : 'false'}</div>
{showAlert &&
<MyAlert severity={alertSeverity} message={alertMessage} setShowAlert = {setShowAlert}/> }
<Switch>
<Route
path="/register"
render={(props) => (
<Register
{...props}
setShowAlert={setShowAlert}
setAlertMessage={setAlertMessage}
setAlertSeverity={setAlertSeverity}
/>
)}
/>
</Switch>
</div>
</BrowserRouter>
Then in your MyAlert component, use useEffect to trigger a timeout:
const MyAlert = (props) => {
useEffect(() => {
const timeout = setTimeout(() => {
props.setShowAlert(false); // Disable your alert after 5 seconds
}, 5000);
return () => {
clearTimeout(timeout); // Clears timer in case you close your alert somewhere else.
}
}, [])
}