title: Is there anyway to execute React JS hook from parent in child component?
body: <p>I have this component &quot;Board&quot;, there's other 3 components: TopBar, SandToHide and TreasureBoxes.</p>
  <p>I just want that the TopBar component reads the &quot;money&quot; value and the TreasureBoxes executes the increment of money. The TopBar is reading the value that i'm setting in Board, but the TreasureBoxes doesn't seems to be executing the increment of the money.</p>
  <p>Thanks in advance!</p>
  <p><strong>Board/index.js</strong>:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import &quot;./index.scss&quot;;
  import { FaBomb, FaBox, FaFlag } from &quot;react-icons/fa&quot;;
  import img from &quot;../../assets/ItemsToHide/barrels/barrel1.png&quot;;
  import TreasureBoxes from &quot;../TreasureBoxes&quot;;
  import TopBar from '../TopBar';
  import SandToHide from &quot;../SandToHide&quot;;
  
  const Board = ({ treasureBoxes, randomTop, randomLeft, sand}) =&gt; {
    const [money, setMoney] = useState(0);
  
  
  
    return (
      &lt;div className=&quot;board-container&quot;&gt;
        &lt;TopBar money={money}&gt;&lt;/TopBar&gt;
      &lt;div className=&quot;sand-to-hide-container&quot;&gt;
        {sand.map((sandd) =&gt; {
          return (
            &lt;SandToHide
              id={sandd.id}
              img={sandd.img}
              randomTop={randomTop}
              randomLeft={randomLeft}
            /&gt;
  
          )
        })}
      &lt;/div&gt;
      &lt;div className=&quot;treasure-boxes-container&quot;&gt;
      {treasureBoxes.map((box) =&gt; {
        return(
        &lt;TreasureBoxes
          setMoney={setMoney}
          money={money} 
          id ={box.id}
          bomba = {box.bomba}
          treasureBoxes={treasureBoxes}
          randomTop={randomTop}
          randomLeft={randomLeft}
          /&gt;
        )
      })}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Board;
  </code></pre>