What is the alternative component of message.error() [antd] in material UI?

Question

I am new to material UI (web), but I have used and. I need to show something like message.error(antd popup) which I can do without putting it in the render part and call it as a simple function... How do I do the same in Material UI?

Edit:

I tried using component, but we have to maintain a state for the message to be displayed & render the Alert everytime the message changes... I need a way to call Alert as a function (e.g. alert.error({message: ''}) or any other component in MUI which can do it)

In antd we can do

// THIS IS TO DISPLAY A POPUP like window. Alert in antd
message.error({message: err||"No network "}) 
},[err])```

Answer 1

You can use state to show/hide the alert as shown in the following example

Demo.js

const Demo = () => {
  const [showmessage, setShowmessage] = useState(false);
  const [alertmessage, setAlertmessage] = useState('Alert message');

  const onClick = () => {
    setShowmessage(!showmessage);
    setAlertmessage('This is alert message');
  };

  return (
    <>
      {showmessage && (
        <Alert variant="filled" severity="error">
          {alertmessage}
        </Alert>
      )}
      <Button style={{ margin: '50px' }} type="primary" onClick={onClick}>
        Show/hide alert
      </Button>
    </>
  );
};

Screenshot: