Después de importar un nuevo componente en app.js , la aplicación no muestra nada en el navegador y ni siquiera recibe un error. El nuevo componente es cart.js También comparte el código modal.js porque se usa en el componente del carrito como contenedor. Además, cuando elimino el componente Cart de la aplicación JS, la aplicación funciona bien.

Aplicación 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;

Archivo cart.js:

 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 se usa como un portal para el componente Cart y las "superposiciones" de ID provienen del index.html que se usa como 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;