Passing a single boolean useState between two pages using Material UI web components

Question

I've been trying to pass in a boolean useState between two pages, using the best practice shown here: How to call useState from another Page?

My main objective is to show a success alert on a different page, once a form is successfully submitted on "./demo"

Demo.js holds a dialog with a submit button that sets the setSuccess to true.

import Alert from "./alert";

export default function AlertDialog() {
  const [success, setSuccess] = React.useState(false); // <- Hides and Shows the Alert Message

  const handleSubmit = () => {
    return (
      <Alert
        setSuccess={() => {
          setSuccess(true); // <- How I am trying to setSuccess to true.
        }}
      />
    );
  };

  return (
        <DialogActions>
          <Button
            onClick={handleSubmit}
            color="primary"
            autoFocus
            component={RouterLink}
            to={"/"}
          >
            Submit
          </Button>
        </DialogActions>
  );

Alert.js has an alert message that appears once success is set to true.

export default function Alerts(props) {
  // const [open, setOpen] = React.useState(false);
  const { success, setSuccess } = props;

  return (
    <div>
      <Collapse in={success}>
        <Alert
          action={
            <IconButton
              aria-label="close"
              color="inherit"
              size="small"
              onClick={() => {
                setSuccess(false);
              }}
            >
              <CloseIcon fontSize="inherit" />
            </IconButton>
          }
        >
          Form Successfully Submitted
        </Alert>
      </Collapse>
      <Button
        disabled={success}
        variant="outlined"
        component={RouterLink}
        to={"/demo"}
      >
        Go Back to Submit Form
      </Button>
    </div>
  )

; }

Could someone explain how I can have the success alert appear after submission? If you wish to take a deeper dive, please visit here https://codesandbox.io/s/alert-test-qhkbg?file=/alert.js

Have you thought of using a Context around your routes and saving the variable there? — Richard Hpa, Jun 23 '21 at 00:57
@RichardHpa I haven't heard of "Context", as I'm fairly new to React. But thank you, I will search it up. — , Jun 23 '21 at 01:51

Ross Moody · Accepted Answer · 2021-06-23T01:04:05.057

I think what you're looking for here is passing state through React Router. Right now your alert isn't updating because your URL is changing when the submit button is pressed.

Check out this sandbox. I'm passing a message and a property to get the alert to render within the / route with different logic.

This is the key snippet:

<Button
  color="primary"
  autoFocus
  component={RouterLink}
  to={{
    pathname: "/",
    state: { message: "hello, i am a state message", open: true }
  }}
>
  Submit
</Button>

And then in your alert component at the url / you can:

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

  React.useEffect(() => {
    props.location.state?.open ? setOpen(true) : setOpen(false);
  }, [props]);

  // This message is what is being passed. Could be anything.
  console.log(props.location.state);

I cannot thank you enough. I was able to find multiple solutions around this answer. — , Jun 23 '21 at 14:29

Passing a single boolean useState between two pages using Material UI web components

1 Answers1