I'm working on a form and I want to redirect to the home page upon submission. I also want a snackbar to appear upon submission, however, the snackbar will only appear on my form page. When it gets redirected, the snackbar disappears. Is there a way I can have the snackbar remain onscreen even after it redirects?

export default function Form() {
    const {register, handleSubmit} = useForm();
    const [open, setOpen] = useState(false);
    const history = useHistory();
    const handleClose = () => {
      setOpen(false);
    }
    const redir = (data) => {
        console.log(data);
        history.push('/')
        setOpen(true);
        console.log(open);
        }  
   return (
        <div>
            <Navbar />
            <form className="form" onSubmit={handleSubmit(redir)}>
                <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
                    <Alert severity='success' onClose={handleClose}>
                        Success! Your message has been sent.
                    </Alert>
                </Snackbar>

I'm working on a form and I want to redirect to the home page upon submission. I also want a snackbar to appear upon submission, however, the snackbar will only appear on my form page. When it gets redirected, the snackbar disappears. Is there a way I can have the snackbar remain onscreen even after it redirects?

export default function Form() {
    const {register, handleSubmit} = useForm();
    const [open, setOpen] = useState(false);
    const history = useHistory();
    const handleClose = () => {
      setOpen(false);
    }
    const redir = (data) => {
        console.log(data);
        history.push('/')
        setOpen(true);
        console.log(open);
        }  
   return (
        <div>
            <Navbar />
            <form className="form" onSubmit={handleSubmit(redir)}>
                <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
                    <Alert severity='success' onClose={handleClose}>
                        Success! Your message has been sent.
                    </Alert>
                </Snackbar>

• javascript
• reactjs

Share Improve this question Follow edited Oct 15, 2020 at 19:46 mkrieger1 23.6k77 gold badges6464 silver badges8282 bronze badges asked Oct 15, 2020 at 19:42 jjfaressjjfaress 4711 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You should call Snackbar ponent with [open, setOpen] not in the Form, but in the Parent ponent and pass setOpen to the Form and call it in redir function.

You're using the router, you can pass the props with push.

history.push({
  pathname: '/',
  openSnackbar: true
});

And then in your parent ponent you have a state for it

const [snackbar, setSnackbar] = useState(location.openSnackbar);

You might need to add a ternary in the useState just in case.

Firstly, I'd use implement the snackbar using HOC or context to make it easier to use anywhere.

Now the solution that works for me: I use it when the user logs in and navigates into the home page.

In the login handler, I did something like this:

if (login === true) {
  localStorage.setItem("isLoggedIn", "true")
//the rest of your implementation
}

In the home page, I did:

useEffect(() => {
    const isLoggedIn = localStorage.getItem("isLoggedIn");
    if (isLoggedIn === "true") {
      // Show Snackbar
      snackbar("Wele user!");

      // Reset the flag in localStorage
      localStorage.removeItem("isLoggedIn");
    }
  }, []);