title: Calling props.myFunction() inside a function in react functional component
body: <p>I am passing a function to a child component in React and it works perfectly when I call it directly in onClick of a button. But then when I move it into a separate function and call the function from onClick, it no longer works. I can verfity the function is being called with a log statement, but props.myFunction() never gets called. I've encountered this a few times now in React and it always confuses me.</p>
  <p>I've looked at some other questions like this one, but its still not helping.</p>
  <p><a href="https://stackoverflow.com/questions/40769724/react-cant-call-prop-function-when-it-is-inside-of-another-function">React: Can&#39;t call prop function when it is inside of another function?</a></p>
  <p>This code works - it sets loggedIn to true in the parent when the button is clicked</p>
  <pre><code>export default function SignupModal(props) {
    return (
      &lt;div class=&quot;main-block&quot;&gt;
        &lt;button
          className=&quot;create-account-button&quot;
          href=&quot;/&quot;
          onClick={props.setIsLoggedIn(true)}
        &gt;
          Create Account
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>this code doesn't set loggedIn to true - but the function still gets called</p>
  <pre><code>export default function SignupModal(props) {
    const createAccount = () =&gt; {
      console.log(&quot;this gets logged&quot;);
  
      //but this doesn't get called
      props.setIsLoggedIn(true);
    };
  
    return (
      &lt;div class=&quot;main-block&quot;&gt;
        &lt;button
          className=&quot;create-account-button&quot;
          href=&quot;/&quot;
          onClick={createAccount}
        &gt;
          Create Account
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>can anyone tell me why?</p>
  <p>here is what I'm trying to do in the parent, maybe a little unorthodox to render routs like this but it's for a splash page - also as mentioned it works perfectly in onClick()</p>
  <pre><code>const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  return (
    &lt;&gt;
      {isLoggedIn ? (
        &lt;&gt;
          &lt;SearchBar onLocationChange={onLocationChange}&gt;&lt;/SearchBar&gt;
          &lt;NavBar&gt;&lt;/NavBar&gt;
  
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/quik&quot;&gt;
              &lt;Pins
                mapRef={mapRef}
                pinnedLocationIds={pinnedLocationIds}
                pinsRemaining={pinsRemaining}
                pushPinnedLocation={pushPinnedLocation}
                usePin={usePin}
                mapCenter={mapCenter}
                setMapCenter={setMapCenter}
                matches={matches}
                setMapZoom={setMapZoom}
                mapZoom={mapZoom}
                changeStatus={changeStatus}
              /&gt;
            &lt;/Route&gt;
  
            &lt;Route path=&quot;/potentials&quot;&gt;
              {/* dont forget, 
              the props for 'Potentials' must also pass 
              through 'potentials in the 'Pins' component! */}
  
              &lt;Potentials
                pinsRemaining={pinsRemaining}
                matches={matches}
                changeStatus={changeStatus}
              /&gt;
            &lt;/Route&gt;
  
            &lt;Route path=&quot;/connects&quot;&gt;
              &lt;Connects matches={matches} recentMatchId={recentMatchId} /&gt;
            &lt;/Route&gt;
            &lt;Route path=&quot;/profile&quot; component={Profile} /&gt;
          &lt;/Switch&gt;
        &lt;/&gt;
      ) : (
        &lt;Route exact path=&quot;/quik&quot;&gt;
          &lt;Landing setIsLoggedIn={() =&gt; setIsLoggedIn}&gt;&lt;/Landing&gt;
        &lt;/Route&gt;
      )}
    &lt;/&gt;
  );
  </code></pre>