title: how do you pass multiple packed propstogether
body: <p>when i try the below i get this error:</p>
  <pre><code>Unhandled Runtime Error
  TypeError: navbar.makeButtonClick is not a function
  
  Source
  .next/static/chunks/pages/index.js (19:29) @ onClick
  
    17 | return(
    18 |   &lt;button href='#' className = {`${styleNavbar.menu__link} ${styleNavbar.r_link} ${styleNavbar.text_underlined}`}{...props}
  &gt; 19 |     onClick={()=&gt;{navbar.makeButtonClick(!navbar.buttonClick);
       |                           ^
    20 |                   userprops.makeRefresh(!userprops.refresh);
    21 |                   }}&gt;
    22 |     {navprops.navbutton}
  </code></pre>
  <p>but i really dont get it..<code>makeButtonClick</code> is an option, i've used the same method to pass <code>mainprops</code> and <code>userprops</code> and it worked...</p>
  <p><strong>whole component:</strong></p>
  <pre><code>import styleNavbar from '../../../styles/Main/Navbar.module.css'
  import React, {useState, useEffect, useRef} from 'react';
  
  
  const NavButtonCreator = (props) =&gt; {
    const {mainprops,userprops,navbar,navprops,...styleprops} = props;
  
    return(
      &lt;button href='#' className = {`${styleNavbar.menu__link} ${styleNavbar.r_link} ${styleNavbar.text_underlined}`}{...props}
        onClick={()=&gt;{navbar.makeButtonClick(!navbar.buttonClick);
                      userprops.makeRefresh(!userprops.refresh);
                      }}&gt;
        {navprops.navbutton}
      &lt;/button&gt;
    );
  };
  
  const NavButtonStyler = (props) =&gt; {
    const {mainprops,userprops,navbar,...navprops} = props;
  
    return(
      &lt;&gt;
      {props.place=='left'&amp;&amp;
        &lt;div className=''&gt;
          &lt;NavButtonCreator mainprops={mainprops} userprops={userprops} navbar={navbar} navprops={navprops} /&gt;
        &lt;/div&gt;}
  
      {props.place=='center'&amp;&amp;
        &lt;div className='absolute left-1/2 transform -translate-x-1/2 '&gt;
          &lt;NavButtonCreator mainprops={mainprops} userprops={userprops} navbar={navbar} navprops={navprops} /&gt;
        &lt;/div&gt;}
  
      {props.place=='right'&amp;&amp;
        &lt;div className='absolute right-0'&gt;
          &lt;NavButtonCreator mainprops={mainprops} userprops={userprops} navbar={navbar} navprops={navprops} /&gt;
        &lt;/div&gt;}
  
      &lt;/&gt;  
    )
  };
  
  const Navbar = (props) =&gt; {
    const {mainprops, ...userprops} = props;
    const [buttonClick, makeButtonClick] = useState(false);
  
    const navbar = {
      buttonClick,
      makeButtonClick
  };
  
  
    useEffect(()=&gt;{ 
      return(
        ()=&gt;{ userprops.setPageId(navbutton);
            }
      );
    },[buttonClick]);
  
  
    if (userprops.visitorType == 'viewer') {
      return(
        &lt;div&gt;
          &lt;nav className = {`${styleNavbar.page__menu} ${styleNavbar.page__custom_settings} ${styleNavbar.menu}`} &gt;
            &lt;ul className = {`${styleNavbar.menu__list} ${styleNavbar.r_list}`} &gt;
                &lt;NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='left'   navbutton='the world'         /&gt;
                &lt;NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='left'   navbutton='the country'          /&gt;
                &lt;NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='left'   navbutton='the state'         /&gt;
                &lt;NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='center' navbutton='the city'   /&gt;
                &lt;NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='right'  navbutton='the town'  /&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      )}
    };
  
  export default Navbar;
  </code></pre>