title: How to change Gatsby Link text with getProps and setState
body: <p>The header.js of my Gatsby website contains a simple navigation with a logo and a link. If the About Page is active:</p>
  <ul>
  <li>Link text should change from &quot;About&quot; to &quot;Close&quot;</li>
  <li>Link URL should change from &quot;/about&quot; to &quot;/&quot;</li>
  </ul>
  <p>See the code of the header.js below:</p>
  <pre><code>import React, { useState } from &quot;react&quot;
  import { Link } from &quot;gatsby&quot;
  
  export default function Header() {
    const [aboutLink, setAboutLink] = useState({
      title: &quot;About&quot;,
      url: &quot;/about&quot;,
    })
  
    const closeLink = {
      title: &quot;Close&quot;,
      url: &quot;/&quot;,
    }
  
    const isActive = ({ isCurrent }) =&gt; {
      return isCurrent &amp;&amp; setAboutLink(closeLink)
    }
  
    return (
      &lt;div id=&quot;header&quot;&gt;
        &lt;Link to=&quot;/&quot;&gt;My Website&lt;/Link&gt;
        &lt;Link getProps={isActive} to={aboutLink.url}&gt;{aboutLink.title}&lt;/Link&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>I tried to achieve this with <code>setState</code> and it seems to work. But not properly because I'm also getting this error in the console:</p>
  <pre><code>Warning: Cannot update a component (`Header`) while rendering a different component (`Context.Consumer`). To locate the bad setState() call inside `Context.Consumer`, follow the stack trace as described in https://github.com/facebook/react/issues/18178#issuecomment-595846312
      in Location (created by Context.Consumer)
      in Link (created by GatsbyLink)
      in GatsbyLink (created by Context.Consumer)
      in Location (created by GatsbyLinkLocationWrapper)
      in GatsbyLinkLocationWrapper (created by ForwardRef)
      in ForwardRef (at header.js:22)
      in div (at header.js:20)
      in Header (at layout.js:8)
      in div (at layout.js:7)
      in Layout (at about.js:21)
      in About (created by HotExportedAbout)
      in AppContainer (created by HotExportedAbout)
      in HotExportedAbout (created by PageRenderer)
      in PageRenderer (at query-result-store.js:90)
      in PageQueryStore (at root.js:58)
      in RouteHandler (at root.js:80)
      in div (created by FocusHandlerImpl)
      in FocusHandlerImpl (created by Context.Consumer)
      in FocusHandler (created by RouterImpl)
      in RouterImpl (created by Context.Consumer)
      in Location (created by Context.Consumer)
      in Router (at root.js:75)
      in ScrollHandler (at root.js:71)
      in RouteUpdates (at root.js:70)
      in EnsureResources (at root.js:68)
      in LocationHandler (at root.js:126)
      in LocationProvider (created by Context.Consumer)
      in Location (at root.js:125)
      in Root (at root.js:134)
      in StaticQueryStore (at root.js:150)
      in ConditionalFastRefreshOverlay (at root.js:149)
      in _default (at app.js:165)
  </code></pre>
  <p>I can't figure it out. If I use <code>useEffect</code> like in this example <a href="https://flaviocopes.com/react-update-while-rendering-different-component/" rel="nofollow noreferrer">https://flaviocopes.com/react-update-while-rendering-different-component/</a> I'm getting this error: <code>'isActive' is not defined</code>:</p>
  <pre><code>useEffect(() =&gt; {
    const isActive = ({ isCurrent }) =&gt; {
      return isCurrent &amp;&amp; setAboutLink(closeLink)
    }
  })
  </code></pre>