title: TypeError: Cannot read properties of undefined (reading 'toString')
body: <p>I am trying to do an onClick event in a react Modal. When I fire the onClick event I would like for it to issue a component form. The onClick event seems to work, but when it renders the component it is throwing the following error.</p>
  <p>TypeError: Cannot read properties of undefined (reading 'toString')</p>
  <p>Which seems to be coming from the following line in the Component Form</p>
  <p>const page = parseInt(router.query.page.toString());</p>
  <p>I have placed the code below for inspection</p>
  <p>Modal:</p>
  <pre><code>import React, {useState} from 'react';
  import { observer } from 'mobx-react-lite'
  import { useDataStore } from 'stores/data';
  import Space from './Space';
  import { Plus } from 'components/Icons'
  import ShowNetworkInfo from '../../components/Forms/ShowNetworkInfo';
  import SpaceDirectory, { Header, Title, Options, Option, OptionIcon, OptionLabel } from &quot;styles/SpaceDirectory/SpaceDirectory&quot;;
    
  const SPACE_DIRECTORY  = observer((props) =&gt; {
  
  const [isInfoShown, setInfoShown] = useState(false);
    
  const handleClick = (event) =&gt; {
      event.preventDefault(); 
      setInfoShown(true);
      }
  
  
    const { spaceStore } = useDataStore();
  
    const spaces = spaceStore.spaces?.map(space =&gt; (
      &lt;Space
        key={space.id} 
        space={space}
      /&gt;
    ))
  
    
  
    return (
      &lt;SpaceDirectory&gt;
        &lt;Header&gt;
          &lt;Title&gt;SPACES&lt;/Title&gt;
          &lt;Options&gt;
            &lt;Option onClick={async () =&gt; console.log(&quot;ADD SPACE&quot;) }&gt;
              &lt;OptionIcon&gt;
                &lt;Plus /&gt;
              &lt;/OptionIcon&gt;
              &lt;OptionLabel&gt;
                SPACE
              &lt;/OptionLabel&gt;
            &lt;/Option&gt;
          &lt;/Options&gt;
          &lt;Options&gt;
              &lt;Option type='submit' onClick={handleClick} &gt;
            {isInfoShown &amp;&amp; &lt;ShowNetworkInfo/&gt;}
              &lt;OptionIcon&gt;
                &lt;Plus /&gt;
              &lt;/OptionIcon&gt;
              &lt;OptionLabel&gt;
                ADD NETWORK
              &lt;/OptionLabel&gt;
            &lt;/Option&gt;
          &lt;/Options&gt;
        &lt;/Header&gt;
        { spaces }
      &lt;/SpaceDirectory&gt;
    );
  });
  
  export default SPACE_DIRECTORY
  </code></pre>
  <p>The onClick event fires and takes me to the following component:</p>
  <p>Component:</p>
  <pre><code>import { observer } from 'mobx-react-lite'
  import { useRouter } from 'next/router';
  import { useEffect, useMemo, useState } from 'react';
  
  import NetworkInformation from 'components/Forms/NetworkInformation';
  import ShowNetworkInfo, { Header, FormNav, FormNavItem, FormBody } from 'styles/Forms/ShowNetworkInfo'
  import { useDataStore } from 'stores/data';
  import { Product } from 'models/Product';
  
  type NetworkNode = any;
  type Order = {
    selectedNetwork:Product
    items:Array&lt;NetworkNode&gt;
  }
  
  const SHOW_NETWORK_INFO = observer(() =&gt; {
    
    const router = useRouter();
    const page = parseInt(router.query.page?.toString())
    const { productStore } = useDataStore()
    const [order, setOrder] = useState&lt;Order&gt;({
      selectedNetwork:null,
      items:[]
    });
  
    useEffect(() =&gt; {
      const page = parseInt(router.query.page.toString());
      if ( order.selectedNetwork &amp;&amp; page === 1 )
        router.push({ pathname:router.pathname, query: { ...router.query, page:2 }})
  
      if ( !order.selectedNetwork &amp;&amp; page &gt; 1 )
        router.push({ pathname:router.pathname, query: { ...router.query, page:1 }})
  
    },[ order.selectedNetwork ])
  
    const FormOptions = useMemo(() =&gt; {
      const options = [];
      switch(page){
  
        case 1:
          options.push(
            &lt;NetworkInformation 
              key={`network-catalog`} 
              selectedNetwork={order.selectedNetwork}
              selectNetwork={( productId ) =&gt; {
                const targetProduct = productStore.products.find(product =&gt; product.pid === productId )
                productId === order.selectedNetwork?.pid ?
                  router.push({ pathname:router.pathname, query: { ...router.query, page:2 }}) :
                  setOrder({ ...order, selectedNetwork:targetProduct })
              }}
            /&gt;
          )
          break;
      }
      return options;
    }, [page]);
  
    return (
      &lt;ShowNetworkInfo&gt;
        &lt;Header&gt;Network Information&lt;/Header&gt;
        {/* &lt;FormNav&gt;
          &lt;FormNavItem 
            data-active={page === 1}
            onClick={() =&gt; {
              if( page !== 1 )
                router.push({ 
                  pathname:router.pathname,
                  query: { ...router.query, page:1 }
                })
            }}&gt;
            1. SELECT
          &lt;/FormNavItem&gt;
          &lt;FormNavItem
            data-active={page === 2}
            onClick={() =&gt; {
              if( page !== 2 &amp;&amp; !!order.selectedNetwork )
                router.push({ 
                  pathname:router.pathname,
                  query: { ...router.query, page:2 }
                })
            }}&gt;
            2. CONFIGURE
          &lt;/FormNavItem&gt;
          &lt;FormNavItem
            data-active={page === 3}
            onClick={() =&gt; {
              if( page !== 3 )
                router.push({ 
                  pathname:router.pathname,
                  query: { ...router.query, page:3 }
                })
            }}&gt;
            3. DEPLOY
          &lt;/FormNavItem&gt;
        &lt;/FormNav&gt; */}
        &lt;FormBody&gt;
          { FormOptions }
        &lt;/FormBody&gt;
      &lt;/ShowNetworkInfo&gt;
    )
  });
  
  export default SHOW_NETWORK_INFO
  </code></pre>