title: App not showing after import new component in App JS
body: <p>After I import a new component in <code>app.js</code> the app renders nothing on the browser and does not even get an error. The new component is <code>cart.js</code>. Also sharing the <code>modal.js</code> code because it's used in the cart component as a wrapper.
  Also when I remove the Cart component from App JS, the app runs fine.</p>
  <p>App JS:</p>
  <pre><code>    import Header from &quot;./components/Layout/Header&quot;;
      import Meals from &quot;./components/Meals/Meals&quot;;
      import Cart from &quot;./components/Cart/Cart&quot;;
      
      function App() {
        return (
          &lt;&gt;
            &lt;Cart /&gt;
            &lt;Header /&gt;
            &lt;main&gt;
              &lt;Meals /&gt;
            &lt;/main&gt;
          &lt;/&gt;
        );
      }
      
      export default App;
  </code></pre>
  <blockquote>
  </blockquote>
  <p>Cart.js file:</p>
  <pre><code>import Modal from &quot;../UI/Modal&quot;;
  import classes from &quot;./Cart.module.css&quot;;
  
  const Cart = (props) =&gt; {
    const cartItems = (
      &lt;ul className={classes[&quot;cart-items&quot;]}&gt;
        {[
          {
            id: &quot;c1&quot;,
            name: &quot;Biryani&quot;,
            Amount: 2,
            price: 250,
          },
        ].map((item) =&gt; (
          &lt;li&gt;{item.name}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
    );
  
    return (
      &lt;&gt;
        &lt;Modal&gt;
          {cartItems}
          &lt;div className={classes.total}&gt;
            &lt;span&gt;Total Amount&lt;/span&gt;
            &lt;span&gt;200&lt;/span&gt;
          &lt;/div&gt;
          &lt;div className={classes.actions}&gt;
            &lt;button className={classes[&quot;button--alt&quot;]}&gt;Close&lt;/button&gt;
            &lt;button className={classes.button}&gt;Order&lt;/button&gt;
          &lt;/div&gt;
        &lt;/Modal&gt;
      &lt;/&gt;
    );
  };
  
  export default Cart; 
  </code></pre>
  <blockquote>
  </blockquote>
  <p>Modal.js is used as a portal for the Cart component and ID &quot;overlays&quot; is coming from the index.html used as a portal.</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import classes from &quot;./Modal.module.css&quot;;
  
  const Backdrop = (props) =&gt; {
    return &lt;div className={classes.backdrop}&gt;&lt;/div&gt;;
  };
  
  const ModalOverlay = (props) =&gt; {
    &lt;div className={classes.modal}&gt;
      &lt;div className={classes.content}&gt;{props.children}&lt;/div&gt;;
    &lt;/div&gt;;
  };
  
  const portalEl = document.getElementById(&quot;overlays&quot;);
  
  const Modal = (props) =&gt; {
    return (
      &lt;&gt;
        {ReactDOM.createPortal(&lt;Backdrop /&gt;, portalEl)}
        {ReactDOM.createPortal(
          &lt;ModalOverlay&gt;{props.childres}&lt;/ModalOverlay&gt;,
          portalEl
        )}
      &lt;/&gt;
    );
  };
  
  export default Modal;
  </code></pre>