title: Alert not working with React Hooks & Bootstrap
body: <p>I'm building a project where people can nominate movies that are their favorites.  I am also attempting
  to have an alert show up when a submit button is clicked to submit all nominations.</p>
  <pre><code>return (
  
          &lt;React.Fragment&gt;
  
              &lt;div id=&quot;nomination-div&quot;&gt;
  
                  Your Nominations
  
                  {generateNominationCards()}
  
                  &lt;Button
                      variant=&quot;primary&quot; onClick={() =&gt; submitNominations()}&gt;
                      Submit Nominations
                  &lt;/Button&gt;
  
              &lt;/div&gt;
  
          &lt;/React.Fragment&gt;
      );
      ```
  
  Here is the code I have for my ```submitNominations()``` button.
  
  </code></pre>
  <pre><code>function submitNominations(){
  
      return(
          &lt;Alert variant=&quot;success&quot;&gt;
          &lt;Alert.Heading&gt;Hey, nice to see you&lt;/Alert.Heading&gt;
          &lt;p&gt;
              Aww yeah, you successfully read this important alert message. This example
              text is going to run a bit longer so that you can see how spacing within an
              alert works with this kind of content.
          &lt;/p&gt;
          &lt;hr /&gt;
          &lt;p className=&quot;mb-0&quot;&gt;
              Whenever you need to, be sure to use margin utilities to keep things nice
              and tidy.
          &lt;/p&gt;
          &lt;/Alert&gt;
      )
  }
  </code></pre>
  <pre><code>
  I'm using this link as my guide: https://react-bootstrap.github.io/components/alerts/
  
  I have &lt;Alerts&gt; defined in a separate file with the rest of my react-bootstrap components like so 
  
      const Jumbotron = ReactBootstrap.Jumbotron;
      const Badge = ReactBootstrap.Badge;
      const Alert = ReactBootstrap.Alert;
      const Carousel = ReactBootstrap.Carousel;
  
  
  Nothing is currently showing up or happening for me at all.
  </code></pre>