title: In React, on button click, display alert for 5 seconds, then hide alert
body: <p>We are using this CSS which is for an animation where the div (or for any element using the <code>animate</code> class) disappears after 4 seconds.</p>
  <pre><code>@keyframes FadeAnimation {
    0% {
      opacity: 1;
      visibility: visible;
    }
    100% {
      opacity: 0;
      visibility: hidden;
    }
  }
  .animate {
    animation: FadeAnimation 4s ease-in .1s forwards;
  }
  </code></pre>
  <p>In react, we have a button that can be clicked, and when the button is clicked, the <code>animate</code> class is added to our Alert div (which was previously hidden):</p>
  <pre><code>const [isUpdating, setIsUpdating] = useState(false)
  const [showAlert, setShowAlert] = useState(false)
  const handleButtonClick = async () =&gt; {
      setIsUpdating(true);
  
      // Axios request to update user info
      try {
          const updateUserObj = { fullName, email };
          const userId = ...;
          const updateResponse = await Axios.put(`/users/update/${userId}`, updateUserObj);
          
          // Set States Following Successful Login
          setIsUpdating(false);
          setShowAlert(true); // setting to true to display hte alert
      } catch (err) {
          setIsUpdating(false);
      }
  };
  
  return (
      &lt;Button onClick={handleButtonClick}&gt;
          {`${isUpdating ? 'Updating...' : 'Submit Button'}`}
      /&gt;
      &lt;Alert
          className={`modal-alert ${showAlert ? 'animate' : ''}`}
          variant='success'
      &gt;
          Your profile was updated
      &lt;/Alert&gt;);
  )
  </code></pre>
  <p>This button click handles submitting a form which updates info for a user in our database, and it also displays an alert by updating the <code>showAlert</code> state to true, which adds <code>animate</code> as a class on the alert.</p>
  <p>Our problem is that this approach only works for the <strong>first</strong> click of the button, but not subsequent clicks. When the button is first clicked, <code>showAlert</code> is set to <code>true</code>, and nothing happens that ever turns this back to <code>false</code>. The CSS handles hiding the alert after 4 seconds, but the button is no longer usable.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Get a hook function
  const {useState} = React;
  
  const Example = ({title}) =&gt; {
    const [isUpdating, setIsUpdating] = useState(false)
    const [showAlert, setShowAlert] = useState(false)
    const handleButtonClick = () =&gt; {
      setIsUpdating(true);
      setIsUpdating(false);
      setShowAlert(true); // setting to true to display hte alert
    };
  
    let alertClass = showAlert ? 'modal-alert animate' : 'modal-alert';
    let alertStyles = showAlert ? {} : { opacity: 0, visibility: 'hidden', pointerEvents: 'none' };
    return (
      &lt;div&gt;
        &lt;div
          className='submit-button' 
          onClick={handleButtonClick}
        &gt;
          Submit Button
        &lt;/div&gt;
        &lt;div
            className={alertClass}
            style={alertStyles}
            variant='success'
        &gt;
            Your profile was updated
        &lt;/div&gt;
      &lt;/div&gt;
    )
  };
  
  // Render it
  ReactDOM.render(
    &lt;Example /&gt;,
    document.getElementById("react")
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.modal-alert {
    border: 1px solid #222222;
  }
  
  .submit-button {
    cursor: pointer;
    background: blue;
    border-radius: 5px;
    padding: 10px 15px;
    color: white;
    font-size: 1em;
    &amp;:hover {
      background: darkblue;
    }
  }
  
  @keyframes FadeAnimation {
    0% {
      opacity: 1;
      visibility: visible;
    }
    100% {
      opacity: 0;
      visibility: hidden;
    }
  }
  .animate {
    animation: FadeAnimation 4s ease-in .1s forwards;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="react"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>