React state doesn't work, it doesn't rerender component-CodePudding

I have problem with react updating state. Well, I didn't touch react for a while and I want to remember some things so I've started from beginning. However, I faced a problem. The problem is that onClick event doesn't work or useState doesn't work. I've tried googling and couldn't find soulution.

I used useEffect to check if there is any problem with hooks, but it displays the message from useEffect at the beginning so it does work. Then problem is with onClick or with useStatee

import React, { useState, useEffect } from "react";
import style from "./App.module.css";
// import Card from "./components/ui/Card";
import Navbar from "./components/nav/Navbar";
import NavbarCart from "./components/nav/NavbarCart";
import FoodDescription from "./components/food/FoodDescription";
import FoodContainer from "./components/food/FoodContainer";
import Food from "./components/food/Food";
// import Backdrop from "./components/modal/Backdrop";
import CartModal from "./components/modal/CartModal";
// import CartContext from "./context/cart-context";

const DUMMY_FOOD = [
  { name: "Sushi", description: "Finest fish and veggeis", price: 22.99 },
  { name: "Schnitzel", description: "A german speciality!", price: 16.5 },
  {
    name: "Barbecue Burger",
    description: "American, raw, meaty",
    price: 12.99,
  },
  { name: "Green Bowl", description: "Healthy...and green...", price: 18.99 },
];

function App() {
  const [cartOpen, setCartOpen] = useState(false);

  useEffect(() => {
    console.log("POCCETAK");
  }, [cartOpen]);

  const onNavbarCartClcikHandler = (e) => {
    console.log(e);
    setCartOpen(true);
  };
  console.log("hahah");

  return (
    <>
      <Navbar onClick={onNavbarCartClcikHandler}>
        <h1>React meals</h1>
        <NavbarCart onClick={onNavbarCartClcikHandler} />
      </Navbar>
      <FoodDescription onClick={onNavbarCartClcikHandler} />
      <FoodContainer onClick={onNavbarCartClcikHandler}>
        {DUMMY_FOOD.map((food) => (
          <Food key={food.name} value={food} />
        ))}
      </FoodContainer>
      {cartOpen ? <CartModal></CartModal> : ""}
    </>
  );
}

export default App;

CodePudding user response：

I understand the issue , Put Navbar in the div or <React.Fragment> element

 <div onClick={onNavbarCartClcikHandler}>
          <Navbar onClick={onNavbarCartClcikHandler}>
            <h1>React meals</h1>
            <NavbarCart onClick={onNavbarCartClcikHandler} />
          </Navbar>
    </div>

CodePudding user response：

In react when you want to pass a parameter

onClick={(e)=> onNavbarCartClcikHandler(e)}

Also you are trying to trigger onClick event on virtual dom that's why onClick won't work so instead you can receive it in you child component like FoodContainer and triggred from real document object like div