title: React-toggle, with react-cookie with a compiled gatsby build
body: <p>I am trying to use <code>react-toggle</code> with <code>react-cookie</code> on a compiled Gatsby build.</p>
  
  <p>For those that don't know, Gatsby compiles ReactJS into a static output (basically flat plain HTML with react on the client side.</p>
  
  <p>I basically want to use React-toggle to toggle between checked/unchecked based from a cookie value.</p>
  
  <p>The challenge here, is that because the code compiles to a static output, it seems to get run server side/before its compiled, so the defaultChecked needs to be accessed from it's own function. <strong>We do not want to access the cookie directly, it will be undefined anyway</strong>.</p>
  
  <pre><code>const Toggle = ({cookieName}) =&gt; {
    const [cookie, setCookie] = useCookies([cookieName]);
    const getCookieValue = () =&gt; typeof cookie[cookieName] === "undefined" ? false : cookie[cookieName] === "true" ? true : false;
    const setCookieValue = (e) =&gt; setCookie(cookieName, e.target.checked, {path: '/'});
  
    return (
      &lt;ToggleWrap&gt;
          &lt;ReactToggle
            defaultChecked={getCookieValue()}
            icons={{
              checked: &lt;ToggleText&gt;Option 1&lt;/ToggleText&gt;,
              unchecked: &lt;ToggleText&gt;Option 2&lt;/ToggleText&gt;
            }}
            onChange={setCookieValue}
          /&gt;
      &lt;/ToggleWrap&gt;
    )
  };
  </code></pre>
  
  <p><strong>Even though the cookie changes, the defaultChecked is always the same, this is the issue. (always false)</strong>.</p>