Question 190974 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to display/hide the footer, when Toast is opened/closed?

I need help with the following:
I would like for the footer to be displayed but when the toast is open, I would like the footer to not display. And when the toast dissapears, after a few seconds(default behavior), the footer needs to come back.
Can someone help me? I am new to React.
The Toast is from bootstrap but with some custom changes. It is working fine rightnow(shows and hides when it is supose to). The state, etc for the toast is in redux.
Below is the code:

<Toast toastStore={toast} showToast={() => toast.open} />

{toast.open ? null : (
       <footer className="footer sticky-bottom bg-white d-flex align-items-center w-100">
            <div className={`row ${styles.footerRow}`}>
              <div className="col-6 d-flex align-items-center justify-content-start">
                <Link to="/employees">
                  <button
                    className={`btn btn-outline-dark ${styles.backButtton}`}
                  >
                    <ChevronLeft />
                    <span className="fw-bold fs-20">一覧に戻る</span>
                  </button>
                </Link>
              </div>
              <div className="col-6 d-flex align-items-center justify-content-end">
                <button
                  className={`btn btn-primary fw-bold fs-20 ${styles.registerButton}`}
                  type="submit"
                  onClick={handleForm}
                >
                  登録
                </button>
              </div>
            </div>
       </footer>
)}

Any kind of workaround would be helpful.
Thank you in advance.

Tags:

2

Answers


  1. 0

    Try using a state to save the value of toast

    const [isToastOpened,setIsToastOpened] = useState(false)

    then use that value

    <Toast toastStore={toast} showToast={isToastOpened} />

{!isToastOpened && () // your footer here

    Also use setIsToastOpened to open and close your toast like

    <Button onClick={()=> setIsToastOpened(true)}>Open toast</Button>
    Login or Signup to reply.
  2. 0

    To achieve the desired behavior, you can update your code as follows:

    1. Create a new state in your component to track the visibility of the footer. Initially, set it to true to display the footer.
    2. When the toast is open, update the state to false to hide the footer.
    3. Use the setTimeout function to wait for a few seconds (the default behavior of the toast), and then update the state back to true to show the footer again.

    Here’s an example implementation:

    import { useState, useEffect } from 'react';

// ...

const [showFooter, setShowFooter] = useState(true);

// ...

<Toast toastStore={toast} showToast={() => toast.open} />

{toast.open ? null : (
  <footer className={`footer sticky-bottom bg-white d-flex align-items-center w-100 ${showFooter ? '' : 'd-none'}`}>
    <div className={`row ${styles.footerRow}`}>
      <div className="col-6 d-flex align-items-center justify-content-start">
        <Link to="/employees">
          <button className={`btn btn-outline-dark ${styles.backButtton}`}>
            <ChevronLeft />
            <span className="fw-bold fs-20">一覧に戻る</span>
          </button>
        </Link>
      </div>
      <div className="col-6 d-flex align-items-center justify-content-end">
        <button
          className={`btn btn-primary fw-bold fs-20 ${styles.registerButton}`}
          type="submit"
          onClick={handleForm}
        >
          登録
        </button>
      </div>
    </div>
  </footer>
)}

// ...

useEffect(() => {
  if (toast.open) {
    setShowFooter(false);
  } else {
    const timeout = setTimeout(() => {
      setShowFooter(true);
    }, 3000); // Adjust the timeout value as per your requirement (in milliseconds)

    return () => clearTimeout(timeout);
  }
}, [toast.open]);

// ...

    In the code above, the showFooter state is used to conditionally add the d-none class (which sets the display property to none) to the footer component. When the toast is open, the footer will be hidden, and after the toast disappears, the footer will be displayed again.

    Make sure to adjust the timeout value in the setTimeout function to match the duration of the toast visibility.

    Note: If you’re using Redux to manage the toast state, you can access the toast state from the Redux store in your component and use it accordingly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search