title: Passing function through useContext
body: <br>
  I'm currently struggling with React Context. I'd like to pass functions allowing the show / hide cart logic in the context, instead of using props between components. 
  I dont understand why when clicking on the button in HeaderCartButton component, it doesn't trigger the **onClick={ctx.onShowCart}** that is in my context, even though when I console log the cartCtx.state it is properly updated, which should then add the  component in the App.js
  <pre><code>//App.js
  
  import { useContext } from &quot;react&quot;;
  
  import Header from &quot;./components/Layout/Header&quot;;
  import Meals from &quot;./components/Meals/Meals&quot;;
  import Cart from &quot;./components/Cart/Cart&quot;;
  import CartProvider from &quot;./store/CartProvider&quot;;
  import CartContext from &quot;./store/cart-context&quot;;
  
  function App() {
    const ctx = useContext(CartContext);
  
    return (
      &lt;CartProvider&gt;
        {ctx.state &amp;&amp; &lt;Cart /&gt;}
        &lt;Header /&gt;
        &lt;main&gt;
          &lt;Meals /&gt;
        &lt;/main&gt;
      &lt;/CartProvider&gt;
    );
  }
  
  export default App;
  </code></pre>
  <pre><code>//cart-context.js
  
  import React from &quot;react&quot;;
  
  const CartContext = React.createContext({
    state: false,
    onShowCart: () =&gt; {},
    onHideCart: () =&gt; {},
    items: [],
    totalAmount: 0,
    addItem: (item) =&gt; {},
    removeItem: (id) =&gt; {},
  });
  
  export default CartContext;
  
  </code></pre>
  <pre><code>//CartProvider.js 
  
  import CartContext from &quot;./cart-context&quot;;
  import { useState } from &quot;react&quot;;
  
  const CartProvider = (props) =&gt; {
    const [cartIsShown, setCartIsShown] = useState(false);
  
    const showCartHandler = () =&gt; {
      setCartIsShown(true);
    };
  
    const hideCartHandler = () =&gt; {
      setCartIsShown(false);
    };
  
    const handleAddItem = (item) =&gt; {};
  
    const handleRemoveItem = (id) =&gt; {};
  
    const cartCtx = {
      state: cartIsShown,
      onShowCart: showCartHandler,
      onHideCart: hideCartHandler,
      items: [],
      totalAmount: 0,
      addItem: handleAddItem,
      removeItem: handleRemoveItem,
    };
  
    return (
      &lt;CartContext.Provider value={cartCtx}&gt;
        {props.children}
      &lt;/CartContext.Provider&gt;
    );
  };
  
  export default CartProvider;
  </code></pre>
  <pre><code>//Header.js
  
  import { Fragment } from &quot;react&quot;;
  
  import HeaderCartButton from &quot;./HeaderCartButton&quot;;
  import mealsImage from &quot;../../assets/meals.jpg&quot;;
  import classes from &quot;./Header.module.css&quot;;
  
  const Header = (props) =&gt; {
    return (
      &lt;Fragment&gt;
        &lt;header className={classes.header}&gt;
          &lt;h1&gt;ReactMeals&lt;/h1&gt;
          &lt;HeaderCartButton /&gt;
        &lt;/header&gt;
        &lt;div className={classes[&quot;main-image&quot;]}&gt;
          &lt;img src={mealsImage} alt=&quot;A table full of delicious food!&quot; /&gt;
        &lt;/div&gt;
      &lt;/Fragment&gt;
    );
  };
  
  export default Header;
  </code></pre>
  <pre><code>//HeaderCartButton.js
  
  import CartIcon from &quot;../Cart/CartIcon&quot;;
  import { useContext } from &quot;react&quot;;
  import classes from &quot;./HeaderCartButton.module.css&quot;;
  import CartContext from &quot;../../store/cart-context&quot;;
  
  const HeaderCartButton = (props) =&gt; {
    const ctx = useContext(CartContext);
    const numberOfCartItems = ctx.items.reduce((accumulator, item) =&gt; {
      return accumulator + item.amount;
    }, 0);
  
    return (
      &lt;button className={classes.button} onClick={ctx.onShowCart}&gt;
        &lt;span className={classes.icon}&gt;
          &lt;CartIcon /&gt;
        &lt;/span&gt;
        &lt;span&gt;Your Cart&lt;/span&gt;
        &lt;span className={classes.badge}&gt;{numberOfCartItems}&lt;/span&gt;
      &lt;/button&gt;
    );
  };
  
  export default HeaderCartButton;
  </code></pre>
  <p>Thanks for your help</p>