title: When I am rendering a a page the page is getting unresponsive
body: <p>In my project i have simple  two components Album and card when  i try to render the card components in app.js  the page never loads and it gives me error that that the page is becoming unresponsive and when i comment the card the page loads perfectly i have not did anything big so far i have just creatd a navbar and wanted to have a card in there</p>
  <p>my app.js</p>
  <pre><code>import Album from './components/Album';
  // import Card from './components/Card';
  
  import './App.css';
  
  function App() {
    return (
      &lt;&gt;
      &lt;Album/&gt;
      {/* &lt;Card/&gt; */}
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>my album.js</p>
  <pre><code>import React from 'react'
  import { Container,Navbar,Nav,NavDropdown,FormControl,Form,Button } from 'react-bootstrap'
  // import  &quot;./style.css&quot;;
  
  const Album = () =&gt; {
      return (
          &lt;&gt;
              &lt;Navbar bg=&quot;light&quot; expand=&quot;lg&quot;&gt;
    &lt;Container&gt;
      &lt;Navbar.Brand href=&quot;#&quot;&gt;Amna Gallery&lt;/Navbar.Brand&gt;
      &lt;Navbar.Toggle aria-controls=&quot;navbarScroll&quot; /&gt;
      &lt;Navbar.Collapse id=&quot;navbarScroll&quot;&gt;
        &lt;Nav
          className=&quot;me-auto my-2 my-lg-0&quot;
          style={{ maxHeight: '100px' }}
          navbarScroll
        &gt;
          &lt;Nav.Link href=&quot;#action1&quot;&gt;Home&lt;/Nav.Link&gt;
          &lt;NavDropdown title=&quot;Link&quot; id=&quot;navbarScrollingDropdown&quot;&gt;
            &lt;NavDropdown.Item href=&quot;#action3&quot;&gt;Action&lt;/NavDropdown.Item&gt;
            &lt;NavDropdown.Item href=&quot;#action4&quot;&gt;Another action&lt;/NavDropdown.Item&gt;
            &lt;NavDropdown.Divider /&gt;
            &lt;NavDropdown.Item href=&quot;#action5&quot;&gt;
              Something else here
            &lt;/NavDropdown.Item&gt;
          &lt;/NavDropdown&gt;
        &lt;/Nav&gt;
        &lt;Form className=&quot;d-flex&quot;&gt;
          &lt;FormControl
            type=&quot;search&quot;
            placeholder=&quot;Search&quot;
            className=&quot;me-2&quot;
            aria-label=&quot;Search&quot;
          /&gt;
          &lt;Button variant=&quot;outline-success&quot;&gt;Search&lt;/Button&gt;
        &lt;/Form&gt;
      &lt;/Navbar.Collapse&gt;
    &lt;/Container&gt;
  &lt;/Navbar&gt;
          &lt;/&gt;
      )
  }
  
  export default Album
  </code></pre>
  <p>my card.js</p>
  <pre><code>import React from 'react'
  import { Button } from 'react-bootstrap'
  
  const Card = () =&gt; {
      return (
          &lt;div&gt;
              &lt;Card style={{ width: '18rem' }}&gt;
    &lt;Card.Img variant=&quot;top&quot; src=&quot;holder.js/100px180&quot; /&gt;
    &lt;Card.Body&gt;
      &lt;Card.Title&gt;Card Title&lt;/Card.Title&gt;
      &lt;Card.Text&gt;
        Some quick example text to build on the card title and make up the bulk of
        the card's content.
      &lt;/Card.Text&gt;
      &lt;Button variant=&quot;primary&quot;&gt;Go somewhere&lt;/Button&gt;
    &lt;/Card.Body&gt;
  &lt;/Card&gt;
          &lt;/div&gt;
      )
  }
  
  export default Card
  </code></pre>
  <p>after using the first answer given getting this error</p>
  <p><a href="https://i.stack.imgur.com/54jdY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/54jdY.png" alt="enter image description here" /></a></p>