I am trying to use the material UI snackbar to show pop up errors in my react application.
I am using a container view. In that view, it does some stuff and errors can be thrown. If it does get an error, I want to render my custom snackbar component.
This is my ErrorPopup component:
import React from 'react';
import { Snackbar } from '@material-ui/core';
import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
function Alert(props: AlertProps) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
interface ErrorProps {
message: string;
}
export default function ErrorPopup(props: ErrorProps) {
const [open, setOpen] = React.useState(true);
const handleClose = () => {
setOpen(false);
};
return (
<div>
{props.message !== '' ? (
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} color="error">
{props.message}
</Alert>
</Snackbar>
) : (
''
)}
</div>
);
}
In my main view, I call this component like so:
<ErrorPopup message={this.state.errors} />
What seems to happen is I get errors that seem to me to indicate something about the WithStyles + typescript issue crops up, but I am out of my depth to fully understand what is going on. I just expected it to work as all my material UI stuff has worked up until now.
I have tried a couple of quick cut n paste run n gun type fixes off the net (as you do), but I clearly don't know what exactly is going on, so I need to at least start there.
Here is a screen grab:
- First off, is this approach to showing the errors ok?
- Secondly, can anyone point me in the right direction here?
