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?
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