0
410
ViewsAlert component from Material UI not showing up?
Hey there was polishing my app since I finally finish it and I though it would be better looking to replace all the window.alerts for Alerts from MUI (cause they look waaaay better) however it doesn't seem to be showing up for some reason ?
So for example I have that when the passwords doesn't match it sends a message:
const register = (e) => {
if(password !== confirmsPassword){
alert("Las contraseñas no coinciden");
}
else if(password.length < 6){
alert("Su contraseña debe tener al menos 6 caracteres");
}
else{
//Some smart and long code that updates the information to the firebase
}
}
And that works it pops the following:
However when I try to use Alerts from MUI:
const register = (e) => {
if(password !== confirmsPassword){
<Alert severity="error">Las contraseñas no coinciden</Alert>
}
else if(password.length < 6){
<Alert severity="error">Su contraseña debe tener al menos 6 caracteres</Alert>
}
else{
//Some smart and long code that updates the information to the firebase
}
}
it doesn't do anything at all no message no alert no nothing. This is the Alert MUI link
1 answers
Answer question0
MUI based answer.
So after a few attempts I found a solution using MUI components and is a mix between Alerts, Snackbar, MuiAlert components
So basically make another component, for this example it will be InstantMessage.js
import React, {useState, forwardRef} from 'react'
import Snackbar from '@mui/material/Snackbar';
import MuiAlert from '@mui/material/Alert';
const Alert = React.forwardRef(function Alert(props, ref) {
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});
const InstantMessage = ({message}) => {
const [open, setOpen] = useState(true);
//Leave this true since we are not using a button
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setOpen(false);
};
return (
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} severity="error">{message}</Alert>
</Snackbar>
)
}
export default InstantMessage
And then in the component you want to use the alerts:
//Initialize you can call it alerts or w/e you want
//I'll use error cause I only catch errors in this piece of code.
import InstantMessage from './InstantMessage ';
const [error, setError] = useState(false); //Controls Alert
const [message, setMessage] = useState('') //Controls Message
so for example I have a register function with firebase:
const register = (e) => {
e.preventDefault();
auth.createUserWithEmailAndPassword(email, password).then((auth) => {
if(auth.user){
//Some smart code
}
}).catch((e) =>
{
if(e.message === "Some error example"){
setMessage("some alert")
setError(true); // Turn On Alert so it displays
}
});
setError(false); //very important to set this back to off
}
Finally somewhere in your render/return add the following statement:
//if error then call component InstantMessage and send the prop message
{error ? <InstantMessage message = {message} /> : `` }
In the end it should look like this:
