The crossIcon on the MUI alert form won't let me close it

Question

The crossIcon on the MUI alert form won't let me close it

I am facing an issue with my snackBar and alert components from MUI. I am trying to close the alert using a function or by clicking on the crossIcon, but it's not working as expected. I have used code examples from MUI, but still can't figure out why it's not functioning properly. Any suggestions or ideas would be greatly appreciated, as I am new to React and MUI.

https://i.sstatic.net/Cc7OQ.png

import { useState } from 'react';

import CloseIcon from '@mui/icons-material/Close';
import { Alert, AlertTitle, IconButton, Snackbar, Typography } from '@mui/material';

interface InfoMessageProps {
  open: boolean;
}

export const InfoMessage = ({ open }: InfoMessageProps) => {
  const [openMessage, setOpenMesage] = useState(false);

const handleCloseMessage = (): void => {
  setOpenMesage(false);
};

  return (
    <Snackbar
      open={open}
      autoHideDuration={4000}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      onClose={handleCloseMessage}
    >
      <Alert
        sx={{
              width: '487px',
              height: '104px',
              paddingTop: '20px',
              paddingLeft: '20px',
              backgroundColor: '#FDFDFD',
        }}
        icon={false}
        action={(
          <IconButton
            aria-label="close"
            color="inherit"
            size="small"
            onClick={handleCloseMessage}
          >
            <CloseIcon fontSize="inherit" />
          </IconButton>
        )}
      >
        <AlertTitle sx={{ paddingRight:'80px' }}>
          <Typography variant='headings.h4'>title</Typography>
        </AlertTitle>
        <Typography variant='captions.default'>Insert message here</Typography>
      </Alert>
    </Snackbar>
  );
};

javascript css reactjs material-ui

Answer 1

Answer №1

Your Snackbar is currently displayed because of the open prop. However, the state inside the InfoMessage component is not being updated. One solution is to pass a callback function from the parent component to the InfoMessage component in order to update the state.

function ParentComponent() {
  const [open, setOpen] = useState(true);

  return (
    <div>
      <InfoMessage open={open} onClose={() => setOpen(false)} />
    </div>
  );
}

You can then utilize this callback function in your InfoMessage component.

interface InfoMessageProps {
  open: boolean;
  onClose: () => void;
}

export const InfoMessage = ({ open, onClose }: InfoMessageProps) => {
  const [openMessage, setOpenMesage] = useState(false);

  return (
    <Snackbar
      open={open}
      autoHideDuration={4000}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
      onClose={onClose}
    >
      <Alert
        sx={{
          width: "487px",
          height: "104px",
          paddingTop: "20px",
          paddingLeft: "20px",
          backgroundColor: "#FDFDFD",
        }}
        icon={false}
        action={
          <IconButton
            aria-label="close"
            color="inherit"
            size="small"
            onClick={onClose}
          >
            <CloseIcon fontSize="inherit" />
          </IconButton>
        }
      >
        <AlertTitle sx={{ paddingRight: "80px" }}>
          <Typography variant="headings.h4">title</Typography>
        </AlertTitle>
        <Typography variant="captions.default">Insert message here</Typography>
      </Alert>
    </Snackbar>
  );
};

Answer 2

Your Snackbar is currently displayed because of the open prop. However, the state inside the InfoMessage component is not being updated. One solution is to pass a callback function from the parent component to the InfoMessage component in order to update the state.

function ParentComponent() {
  const [open, setOpen] = useState(true);

  return (
    <div>
      <InfoMessage open={open} onClose={() => setOpen(false)} />
    </div>
  );
}

You can then utilize this callback function in your InfoMessage component.

interface InfoMessageProps {
  open: boolean;
  onClose: () => void;
}

export const InfoMessage = ({ open, onClose }: InfoMessageProps) => {
  const [openMessage, setOpenMesage] = useState(false);

  return (
    <Snackbar
      open={open}
      autoHideDuration={4000}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
      onClose={onClose}
    >
      <Alert
        sx={{
          width: "487px",
          height: "104px",
          paddingTop: "20px",
          paddingLeft: "20px",
          backgroundColor: "#FDFDFD",
        }}
        icon={false}
        action={
          <IconButton
            aria-label="close"
            color="inherit"
            size="small"
            onClick={onClose}
          >
            <CloseIcon fontSize="inherit" />
          </IconButton>
        }
      >
        <AlertTitle sx={{ paddingRight: "80px" }}>
          <Typography variant="headings.h4">title</Typography>
        </AlertTitle>
        <Typography variant="captions.default">Insert message here</Typography>
      </Alert>
    </Snackbar>
  );
};

Answer 3

Answer №2

import { useState, useEffect } from "react";
import { Alert, AlertTitle, Fade } from "@mui/material";

export default function AlertBox() {

  const [alertVisibility, setAlertVisibility] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setAlertVisibility(false);
    }, 3000);
  });

  return (
    <Fade in={alertVisibility} timeout={{ exit: 1000 }}>
      <Alert
        onClose={() => {
          setAlertVisibility(false);
        }}
        severity="success"
        variant="filled"
        sx={{
          minWidth: 300,
          position: "absolute",
          zIndex: 100,
          bottom: 10,
          right: 10,
        }}
      >
        <AlertTitle>Warning</AlertTitle>
        Your message will go here
      </Alert>
    </Fade>
  );
};

Answer 4

import { useState, useEffect } from "react";
import { Alert, AlertTitle, Fade } from "@mui/material";

export default function AlertBox() {

  const [alertVisibility, setAlertVisibility] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setAlertVisibility(false);
    }, 3000);
  });

  return (
    <Fade in={alertVisibility} timeout={{ exit: 1000 }}>
      <Alert
        onClose={() => {
          setAlertVisibility(false);
        }}
        severity="success"
        variant="filled"
        sx={{
          minWidth: 300,
          position: "absolute",
          zIndex: 100,
          bottom: 10,
          right: 10,
        }}
      >
        <AlertTitle>Warning</AlertTitle>
        Your message will go here
      </Alert>
    </Fade>
  );
};

The crossIcon on the MUI alert form won't let me close it

Answer №1

Answer №2

Similar questions

Looping through multi-dimensional JSON objects with jQuery

error detection in AJAX response handler

Update the inputs following the filtering or searching of issues in VueJS

The scrollbar will be visible only when the mouse hovers over the table

retrieve the image name of the background using jQuery

Transferring HTML variables to an Angular Component

How to extract query string parameters using node.js

The Value of Kendo Data

What is the purpose of using the typeface Roboto?

Getting Creative with Jquery Custombox: Embracing the 404

Angular Dom does not update when invoking a function within a separate component

Arranging an Array of Arrays Containing Strings

What is preventing me from defining the widget as the key (using keyof) to limit the type?

Navigate to the AngularJS documentation and locate the section on monitoring data changes after a dropdown selection

Retrieve the value of a CSS class property regardless of whether it is actively being utilized

Access denial encountered when attempting to submit upload in IE8 using JavaScript

Removing a field from a collection using firebase-admin: Tips and tricks

The shared module for next/router is not found in the shared scope default within Next.js and @module-federation/nextjs-mf

Showing hidden JavaScript elements in different parts of a webpage

It appears that when filtering data in Angular from Web Api calls, there is a significant amount of data cleaning required