App not showing after import new component in App JS-CodePudding

After I import a new component in app.js the app renders nothing on the browser and does not even get an error. The new component is cart.js. Also sharing the modal.js 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.

App JS:

    import Header from "./components/Layout/Header";
    import Meals from "./components/Meals/Meals";
    import Cart from "./components/Cart/Cart";
    
    function App() {
      return (
        <>
          <Cart />
          <Header />
          <main>
            <Meals />
          </main>
        </>
      );
    }
    
    export default App;

Cart.js file:

import Modal from "../UI/Modal";
import classes from "./Cart.module.css";

const Cart = (props) => {
  const cartItems = (
    <ul className={classes["cart-items"]}>
      {[
        {
          id: "c1",
          name: "Biryani",
          Amount: 2,
          price: 250,
        },
      ].map((item) => (
        <li>{item.name}</li>
      ))}
    </ul>
  );

  return (
    <>
      <Modal>
        {cartItems}
        <div className={classes.total}>
          <span>Total Amount</span>
          <span>200</span>
        </div>
        <div className={classes.actions}>
          <button className={classes["button--alt"]}>Close</button>
          <button className={classes.button}>Order</button>
        </div>
      </Modal>
    </>
  );
};

export default Cart;

Modal.js is used as a portal for the Cart component and ID "overlays" is coming from the index.html used as a portal.

import React from "react";
import ReactDOM from "react-dom";
import classes from "./Modal.module.css";

const Backdrop = (props) => {
  return <div className={classes.backdrop}></div>;
};

const ModalOverlay = (props) => {
  <div className={classes.modal}>
    <div className={classes.content}>{props.children}</div>;
  </div>;
};

const portalEl = document.getElementById("overlays");

const Modal = (props) => {
  return (
    <>
      {ReactDOM.createPortal(<Backdrop />, portalEl)}
      {ReactDOM.createPortal(
        <ModalOverlay>{props.childres}</ModalOverlay>,
        portalEl
      )}
    </>
  );
};

export default Modal;

CodePudding user response：

Please change name here and try again

import Meals from "./components/Meals/Meals";
import Meals from "./components/Cart/Cart";

@aliezaheer

CodePudding user response：

My bad, after spending half of my day I have found that I didn't use return() for the ModalOverlay function in Modal.js file and it was not throwing the error in the terminal.

Correction:

const ModalOverlay = (props) => {
  return (
    <div className={classes.modal}>
      <div className={classes.content}>{props.children}</div>
    </div>
  );
};