how do you pass multiple packed propstogether-CodePudding

when i try the below i get this error:

Unhandled Runtime Error
TypeError: navbar.makeButtonClick is not a function

Source
.next/static/chunks/pages/index.js (19:29) @ onClick

  17 | return(
  18 |   <button href='#' className = {`${styleNavbar.menu__link} ${styleNavbar.r_link} ${styleNavbar.text_underlined}`}{...props}
> 19 |     onClick={()=>{navbar.makeButtonClick(!navbar.buttonClick);
     |                           ^
  20 |                   userprops.makeRefresh(!userprops.refresh);
  21 |                   }}>
  22 |     {navprops.navbutton}

but i really dont get it..makeButtonClick is an option, i've used the same method to pass mainprops and userprops and it worked...

whole component:

import styleNavbar from '../../../styles/Main/Navbar.module.css'
import React, {useState, useEffect, useRef} from 'react';


const NavButtonCreator = (props) => {
  const {mainprops,userprops,navbar,navprops,...styleprops} = props;

  return(
    <button href='#' className = {`${styleNavbar.menu__link} ${styleNavbar.r_link} ${styleNavbar.text_underlined}`}{...props}
      onClick={()=>{navbar.makeButtonClick(!navbar.buttonClick);
                    userprops.makeRefresh(!userprops.refresh);
                    }}>
      {navprops.navbutton}
    </button>
  );
};

const NavButtonStyler = (props) => {
  const {mainprops,userprops,navbar,...navprops} = props;

  return(
    <>
    {props.place=='left'&&
      <div className=''>
        <NavButtonCreator mainprops={mainprops} userprops={userprops} navbar={navbar} navprops={navprops} />
      </div>}

    {props.place=='center'&&
      <div className='absolute left-1/2 transform -translate-x-1/2 '>
        <NavButtonCreator mainprops={mainprops} userprops={userprops} navbar={navbar} navprops={navprops} />
      </div>}

    {props.place=='right'&&
      <div className='absolute right-0'>
        <NavButtonCreator mainprops={mainprops} userprops={userprops} navbar={navbar} navprops={navprops} />
      </div>}

    </>  
  )
};

const Navbar = (props) => {
  const {mainprops, ...userprops} = props;
  const [buttonClick, makeButtonClick] = useState(false);

  const navbar = {
    buttonClick,
    makeButtonClick
};


  useEffect(()=>{ 
    return(
      ()=>{ userprops.setPageId(navbutton);
          }
    );
  },[buttonClick]);


  if (userprops.visitorType == 'viewer') {
    return(
      <div>
        <nav className = {`${styleNavbar.page__menu} ${styleNavbar.page__custom_settings} ${styleNavbar.menu}`} >
          <ul className = {`${styleNavbar.menu__list} ${styleNavbar.r_list}`} >
              <NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='left'   navbutton='the world'         />
              <NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='left'   navbutton='the country'          />
              <NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='left'   navbutton='the state'         />
              <NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='center' navbutton='the city'   />
              <NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='right'  navbutton='the town'  />
          </ul>
        </nav>
      </div>
    )}
  };

export default Navbar;

CodePudding user response：

In each of the NavButtonStyler components (inside the Navbar), you're unpacking the navbar prop:

<NavButtonStyler mainprops={mainprops} userprops={userprops} {...navbar} place='left'   navbutton='the world'         />
                                                             ^ Here

This means that the buttonClick and makeButtonClick functions are passed as props. Just pass the navbar prop directly.

<NavButtonStyler mainprops={mainprops} userprops={userprops} navbar={navbar} place='left'   navbutton='the world'         />

CodePudding user response：

In your Navbar component, you are unpacking the navbar object when passing it to NavButtonStyler like this: {...navbar}.

Unpacking the object, means that the properties of the object (buttonClick and makeButtonClick in this case), are passed among the normal props to the component.

You can solve this in two ways:

Keep the unpacking, and make NavButtonStyler accept buttonClick and makeButtonClick. You would then need to repack them for passing to NavButtonCreator, or make NavButtonCreator accept them as separate props. Repacking can be done like this:

const NavButtonCreator = (props) => {
    const {mainprops,userprops,buttonClick,makeButtonClick,navprops,...styleprops} = props;
    const navbar = { buttonClick, makeButtonClick };

Or pass navbar as a normal property in Navbar:

<NavButtonStyler mainprops={mainprops} userprops={userprops} navbar={navbar} place='left'   navbutton='the world'         />

CodePudding user response：

I got it, you are spreading navbar to your component NavButtonStyler.. By spreading the object "navbar", it will only transport the fields inside...

So the props which are arriving at NavButtonStyler is not navbar but buttonClick and makeButtonClick ;-)

So change that where you destructure your props in NavButtonStyler to:

const {mainprops,userprops,buttonClick,makeButtonClick,...navprops} = props;

and remove navbar. in your click handler and it will work :)

Oh, and please, install and use https://prettier.io/ to get auto-formatted code and... don't call your state-setters "make"... they should follow a pattern like

const [buttonClicked, setButtonClicked] = useState(false);

CodePudding user response：

You destructures navbar while passing through component, so you need to use function directly instead of navbar.functionName