title: Props not passing down to a component
body: <p>I am trying to pass a state function <code>setMyChoice</code> as a prop to a <code>GamePlay</code> component in a rock paper scissors Nextjs application so as to produce a value for comparison. In the gameplay component, I am passing a prop to a component <code>PlayButtons</code> as shown below.  In the <code>PlayButtons</code>, i can't access the value set by the function <code>setChoice</code> that is to be compared with the random value generated to determine whether the player has won, lost or draw. Kindly assist .The code samples are shown below.</p>
  <pre><code>//index.js
          const [myChoice, setMyChoice] = useState(&quot;&quot;)
          &lt;Gameplay advanced={advancedMode} setMyChoice={setMyChoice} /&gt;
  </code></pre>
  <p>GamePlay.js</p>
  <pre><code>//GamePlay.js
  const Gameplay = ({ setMyChoice }) =&gt; {
    const setChoice = (e) =&gt; {
      setMyChoice(e.target.dataset.id);
    };
  return (
        &lt;PlayButtons  setChoice={setChoice} /&gt;
  
  );
  }
  
  
   
  </code></pre>
  <p>PlayButtons.js</p>
  <pre><code>function PlayButtons({setChoice  }) {
    return (
  &lt;div className={styles.doublegrid}&gt;
            &lt;Link href=&quot;/Game&quot; passHref&gt;
            &lt;button onClick={setChoice}  className={`${styles.paper} ${styles.circle}`}&gt;
              &lt;span className={styles.wrapper}&gt;
              &lt;Image src={icon_paper} alt=&quot;&quot;/&gt;
              &lt;/span&gt;
            &lt;/button&gt;
            &lt;/Link&gt;
            &lt;Link href=&quot;/Game&quot; passHref&gt;
            &lt;button
              onClick={setChoice}
              className={`${styles.scissors1} ${styles.circle}`}
            &gt;
              &lt;span className={styles.wrapper}&gt;
              &lt;Image src={icon_scissors} alt=&quot;&quot; /&gt;
              &lt;/span&gt;
            &lt;/button&gt;
            &lt;/Link&gt;
            &lt;Link href=&quot;/Game&quot; passHref&gt;
              &lt;button  onClick={setChoice} className={`${styles.rock} ${styles.circle}`}&gt;
              &lt;span className={styles.wrapper}&gt;
              &lt;Image src={icon_rock} alt=&quot;&quot; /&gt;
              &lt;/span&gt;
            &lt;/button&gt;
            &lt;/Link&gt;
          
          &lt;/div&gt;
        )}
      &lt;/div&gt;
  
  );
  }
  </code></pre>
  <p>Game.js</p>
  <pre><code>function Game({ score, myChoice, setScore, advanced, setChoice }) {
    const [house, setHouse] = useState(&quot;&quot;);
    const [playerWin, setPlayerWin] = useState(&quot;&quot;);
  
    const [counter, setCounter] = useState(3);
  
    const newHousePick = () =&gt; {
      const choices = [&quot;rock&quot;, &quot;paper&quot;, &quot;scissors&quot;, &quot;lizard&quot;, &quot;spock&quot;];
      setHouse(choices[Math.floor(Math.random() * 3)]);
    };
    useEffect(() =&gt; {
      newHousePick();
    }, []);
  
    const Result = () =&gt; {
      if (myChoice === &quot;rock&quot; &amp;&amp; house === &quot;scissors&quot;) {
        setPlayerWin(&quot;win&quot;);
        setScore(score + 1);
      } else if (myChoice === &quot;rock&quot; &amp;&amp; house === &quot;paper&quot;) {
        setPlayerWin(&quot;lose&quot;);
        setScore(score - 1);
      } else if (myChoice === &quot;rock&quot; &amp;&amp; house === &quot;lizard&quot;) {
        setPlayerWin(&quot;lose&quot;);
        setScore(score + 1);
      } else if (myChoice === &quot;lizard&quot; &amp;&amp; house === &quot;rock&quot;) {
        setPlayerWin(&quot;lose&quot;);
        setScore(score - 1);
      } else if (myChoice === &quot;lizard&quot; &amp;&amp; house === &quot;spock&quot;) {
        setPlayerWin(&quot;lose&quot;);
        setScore(score + 1);
      } else if (myChoice === &quot;spock&quot; &amp;&amp; house === &quot;lizard&quot;) {
        setPlayerWin(&quot;lose&quot;);
        setScore(score + 1);
      } else if (myChoice === &quot;spock&quot; &amp;&amp; house === &quot;scissors&quot;) {
        setPlayerWin(&quot;win&quot;);
        setScore(score + 1);
      } else if (myChoice === &quot;spock&quot; &amp;&amp; house === &quot;lizard&quot;) {
        setPlayerWin(&quot;win&quot;);
        setScore(score + 1);
      } else if (myChoice === &quot;lizard&quot; &amp;&amp; house === &quot;spock&quot;) {
        setPlayerWin(&quot;lose&quot;);
        setScore(score - 1);
      } else if (myChoice === &quot;scissors&quot; &amp;&amp; house === &quot;lizard&quot;) {
        setPlayerWin(&quot;win&quot;);
        setScore(score + 1);
      } else if (myChoice === &quot;lizard&quot; &amp;&amp; house === &quot;scissors&quot;) {
        setPlayerWin(&quot;lose&quot;);
        setScore(score - 1);
      } else if (myChoice === &quot;lizard&quot; &amp;&amp; house === &quot;paper&quot;) {
        setPlayerWin(&quot;win&quot;);
        setScore(score + 1);
      } else if (myChoice === &quot;paper&quot; &amp;&amp; house === &quot;lizard&quot;) {
        setPlayerWin(&quot;lose&quot;);
        setScore(score - 1);
      } else if (myChoice === &quot;spock&quot; &amp;&amp; house === &quot;rock&quot;) {
        setPlayerWin(&quot;win&quot;);
        setScore(score + 1);
      } else if (myChoice === &quot;rock&quot; &amp;&amp; house === &quot;spock&quot;) {
        setPlayerWin(&quot;lose&quot;);
        setScore(score - 1);
      } else if (myChoice === &quot;scissors&quot; &amp;&amp; house === &quot;paper&quot;) {
        setPlayerWin(&quot;win&quot;);
        setScore(score + 1);
      } else if (myChoice === &quot;scissors&quot; &amp;&amp; house === &quot;rock&quot;) {
        setPlayerWin(&quot;lose&quot;);
        setScore(score - 1);
      } else if (myChoice === &quot;paper&quot; &amp;&amp; house === &quot;rock&quot;) {
        setPlayerWin(&quot;win&quot;);
        setScore(score + 1);
      } else if (myChoice === &quot;paper&quot; &amp;&amp; house === &quot;scissors&quot;) {
        setPlayerWin(&quot;lose&quot;);
        setScore(score - 1);
      } else {
        setPlayerWin(&quot;draw&quot;);
      }
    };
  
    return (
      &lt;div className={styles.selection}&gt;
        myChoice : {myChoice} &lt;br/&gt;
        HouseChoice: {house} &lt;br/&gt;
        Result: 
        {playerWin == &quot;win&quot; &amp;&amp; &lt;h1&gt;You win&lt;/h1&gt;}
        {playerWin == &quot;lose&quot; &amp;&amp; &lt;h1&gt;You lose&lt;/h1&gt;}
        {playerWin == &quot;draw&quot; &amp;&amp; &lt;h1&gt;You draw&lt;/h1&gt;}
        
        &lt;/div&gt;
  
    );
  }
  
  export default Game;
  
  </code></pre>