Is there a way to destructure with spreader?-CodePudding

Here were the props I originally tried to pass through to a component:

const allprops = {
    mainprops:{mainprops}, // object
    pageid:{pageId}, // variable
    setpageid:{setPageId}, // state function
    makerefresh:{makeRefresh} // state function
}

<Navbar allprops={allprops} />

I quickly realized I created a monster -- some nested object:

{mainprops: {…}, pageid: {…}, setpageid: {…}, makerefresh: {…}}

 mainprops: {mainprops: {…}}

after breaking my head, I came up with this:

const Navbar = (props) => {
  const {allprops} = props;

  const {mainprops, ...userprops} = allprops
  const {mainprops:{} = {}} = mainprops;
  const {userprops:{} = {}} = userprops;

is there a way to turn this into a one liner? Or a loop or something faster/shorter?

CodePudding user response：

You are unnecessarily nesting your prop values inside an additional object. This:

const allprops = {
    mainprops:{mainprops}, // object
    pageid:{pageId}, // variable
    setpageid:{setPageId}, // state function
    makerefresh:{makeRefresh} // state function
}

can be made much more concise and easy to work with by changing it to:

const allprops = {
    mainprops,
    pageId,
    setPageId,
    makeRefresh
};

and by spreading that:

<Navbar {...allprops} />

And then in your child component, all you need is:

const Navbar = ({ mainprops, pageId, setPageId, makeRefresh }) => {
  // proceed to use mainprops, pageId, setPageId, makeRefresh