How to show mui snackbar as a error in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To show mui snackbar as a error in react js, you have to use <Alert onClose={handleClose} severity="error"> component in snackbar alert. it will show mui snackbar as a error in React JS.

Today, I am going to show you, How to show mui snackbar as a error in react js

Installation

Install the following packages to use mui snackbar alert in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

Table of contents

• Install MUI and create a new React app.
• Import Material-UI snackbar alert.
• Use the snackbar alert Component

Step 1: Install MUI and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import Material-UI snackbar alert.

After installing MUI, you have to import your React component. To do this, add the following line to the top of your component file.

import React from "react";
import Button from "@mui/material/Button";
import Snackbar from "@mui/material/Snackbar";
import Alert from "@mui/material/Alert";

Step 3: Use the snackbar alert Component.

A snackbar alert screen is an animated placeholder that simulates the layout of a website while data is being loaded.

<Snackbar open={open} autoHideDuration={5000} onClose={handleClose}>
  <Alert onClose={handleClose} severity="error">
    This is an error message.
  </Alert>
</Snackbar>

MUI material show mui snackbar as a error example.

The below code is an example, you need to import snackbar alert Component. Then, you have to use <Alert onClose={handleClose} severity="error"> component in snackbar alert. Then it will show mui snackbar as a error in react js.

App.js

import React from "react";
import Button from "@mui/material/Button";
import Snackbar from "@mui/material/Snackbar";
import Alert from "@mui/material/Alert";

function MyErrorSnackbar() {
  const [open, setOpen] = React.useState(false);

  const showErrorSnackbar = () => {
    setOpen(true);
  };

  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
    setOpen(false);
  };

  return (
    <div>
      <Button onClick={showErrorSnackbar}>Show Error Snackbar</Button>
      <Snackbar open={open} autoHideDuration={5000} onClose={handleClose}>
        <Alert onClose={handleClose} severity="error">
          This is an error message.
        </Alert>
      </Snackbar>
    </div>
  );
}

export default MyErrorSnackbar;

In the above code example, I have used the @mui/material component and show mui snackbar as a error in react js.

Here, we are provided code sandbox links for the above program show mui snackbar as a error in react js. Then you can use whenever you want and do the changes as per your requirements.

Try it Yourself

All the best 👍