I'm trying to hide the shopping cart modal of an e-commerce store that I'm trying to build on React. When I try to follow the code in the tutorial, the cart modal window does not hide from the display and just remains there in front of all the other components. There's no error that displays btw. I'm using a wrapper component with the name of Layout here.

Karte.js - the main cart component

import { useState, React } from "react";
import Modal from "./Modal";

export default function Karte(props) {
  const [cartIsOpen, setCartIsOpen] = useState(false);

  function functionName() {
    setCartIsOpen(true);
  }

  const cartItems = (
    <ul>
      {[{ id: "i1", name: "Ralph Lauren", amount: 3, price: 14.99 }].map(
        (item) => (
          <li key={item.id}>
            {item.name}
            {item.price}
          </li>
        )
      )}
    </ul>
  );

  return (
    <Modal>
      {cartItems}
      <div>
        <span>Total Amount</span>
        <span>35.54</span>
      </div>
      <div>
        <button onClick={functionName}>Close</button>
        <button>Checkout</button>
      </div>
    </Modal>
  );
}

This is the Modal component code

const Modal = (props) => {
  return <div className="modal">{props.children}</div>;
};

export default Modal;

Lastly, this is the Wrapper component (that the modal is a child component of)

import { useState, React } from "react";
import NavBar from "../NavBar";
import Modal from "../Modal";
import Backdrop from "../Backdrop";

export default function Layout(props) {
  const [cartIsOpen, setCartIsOpen] = useState(false);

  function functionName() {
    setCartIsOpen(true);
  }
  return (
    <div>
      <NavBar />
      <main>{props.children}</main>
      {cartIsOpen && <Modal />}
      <Backdrop />
    </div>
  );
}

If it means anything, this is the App component too

function App() {
  return (
    <Layout>
      <Karte />
      <Routes>
        <Route path="/" element={<HomePage />} exact />
        <Route path="/checkout" element={<CheckoutPage />} />
        <Route path="/cart" element={<CartPage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/sale" element={<SalePage />} />
        <Route path="/faqs" element={<FaqsPage />} />
      </Routes>
    </Layout>
  );
}

export default App;

CodePudding user response：

The good news is there are multiple ways to solve this. The main 2 options I'd consider are:

1. You could move your useState into App, and pass a toggleCart callback to Layout

App.js:

function App() {
  const [cartVisible, setCardVisible] = useState(false)

  return (
    <Layout onToggleCart={() => setCartVisible(!cartVisible)}>
      {cartVisible ? <Karte /> : null}
      <Routes>
        ...
      </Routes>
    </Layout>
  );
}

2. You could render Karte from Layout

Layout.js:

import { useState, React } from "react";
import NavBar from "../NavBar";
import Modal from "../Modal";
import Backdrop from "../Backdrop";

export default function Layout(props) {
  const [cartIsOpen, setCartIsOpen] = useState(false);

  function functionName() {
    setCartIsOpen(true);
  }
  return (
    <>
      <div>
        <NavBar />
        <main>{props.children}</main>
        {cartIsOpen && <Modal />}
        <Backdrop />
      </div>
      {cartIsOpen ? <Karte /> : null}
    </>
  );
}

And remove <Karte /> from App.js

CodePudding user response：

check if functionName is running and setting state to true current = Close. If so change code to this <button onClick={()=>{functionName}}>