I created a custom Alert as shown below, but when I add Snackbar, it is not displaying. Here is the part that I changed, the rest is the same:
AlertPopup:
const AlertPopup = () => {
const { text, type } = useAlert();
if (text && type) {
return (
// when I use this, the message is displayed
// <Alert variant="filled" severity={type} sx={{}}>
// {text}
// </Alert>
// when I use this, the message is NOT displayed
<Stack spacing={2} sx={{ width: '100%' }}>
<Snackbar autoHideDuration={6000}>
{/* <Alert severity={type} sx={{ width: '100%' }}> */}
<Alert variant="filled" severity={type} >
{text}
</Alert>
</Snackbar>
</Stack>
);
} else {
return <></>;
}
};
Here is the other parts of the implementation. I did not changed anything as there is not specific component for Alert:
AlertContext:
const ALERT_TIME = 6000;
const initialState = {
text: "",
type: "",
};
const AlertContext = createContext({
...initialState,
setAlert: () => {},
});
export const AlertProvider = ({ children }) => {
const [text, setText] = useState("");
const [type, setType] = useState("");
const setAlert = (text, type) => {
setText(text);
setType(type);
setTimeout(() => {
setText("");
setType("");
}, ALERT_TIME);
};
return (
<AlertContext.Provider
value={{
text,
type,
setAlert,
}}
>
{children}
</AlertContext.Provider>
);
};
useAlert:
const useAlert = () => useContext(AlertContext);
export default useAlert;
So, what is missing with this implementation?