I'm currently building an AddProductPage component for my web app. It receives a bunch of props from its parent AddProductContainer and should divide those props among many smaller components that it renders on the page.
Example:
AddProductPage.js
function AddProductPage(props) {
return(
<React.Fragment>
<Component1
propsA={props.propsA}
propsB={props.propsB}
/>
<Component2
propsC={props.propsC}
propsD={props.propsD}
propsE={props.propsE}
/>
// And so on...
</React.Fragment>
);
}
I've decided that I will to divide the full props object into smaller objects, one for each component, so I can see what my code will render on the page in a cleaner look. Like:
function AddProductPage(props) {
const comp1Props = {
propsA: props.propsA,
propsB: props.propsB
}
const comp2Props = {
propsC: props.propsC,
propsD: props.propsD,
propsE: props.propsE
}
return(
<React.Fragment>
<Component1 {...comp1Props}/> // <--- Easier to see what will render
<Component2 {...comp2Porps}/>
// And so on...
</React.Fragment>
);
}
I'm currently thinking if is it possible to dynamically destructure (or some other approach) all props into single variables so I can write something like this:
function AddProductPage(props) {
// Some code to destructure all props into single variables
const comp1Props = {
propsA,
propsB
};
const comp2Props = {
propsC,
propsD,
propsE
};
return(
<React.Fragment>
<Component1 {...comp1Props}/> // <--- Easier to see what will render
<Component2 {...comp2Porps}/>
// And so on...
</React.Fragment>
);
}
How can I do this?
EDIT
I think I wasn't being clear enough with my question. But what I meant with dynamically is to destructure everything without knowing the props names or how many props there are. Is it possible?
Like:
const {...props} = {...props}; // This is pseudo code
This way I think my code will be as clean as it can get. Thanks.
The "Some code to destructure all props into single variables" would be simple destructuring:
const { propsA, propsB, propsC, propsD, propsE } = props;
Live Example:
const props = {
propsA: "a",
propsB: "b",
propsC: "c",
propsD: "d",
propsE: "e"
};
const { propsA, propsB, propsC, propsD, propsE } = props;
const comp1Props = {
propsA,
propsB
};
const comp2Props = {
propsC,
propsD,
propsE
};
console.log(comp1Props);
console.log(comp2Props);.as-console-wrapper {
max-height: 100% !important;
}In comments you've clarified:
what I meant with dynamically is to destructure everything without knowing the props names or how many props there are.
I asked how you would know what to assign to comp1Props vs comp2Props, and you said:
I woud still decide that and create those objects manually. But if a pass a new prop to
AddProductPage, I would like it to be automatically destructured and available to add that into the comp1Props object, for example. Otherwise I would have to remember to destructure it first and then add it to thecomp1Propsobject.
So the question is: Can you automatically create constants/variables for all of props's properties in AddProductPage, so that they're all available to use in the code creating comp1Props and comp2Props?
No, you can't do that without using a confusing feature (with) that isn't available in strict mode (which is enabled by default in modules). If you could use with, you'd just do with (props) { /*...*/ } and create your comp1Props and comp2Props within that block. But you can't use with in modern JavaScript.
You're probably best off doing what you're already doing:
const comp1Props = {
propsA: props.propsA,
propsB: props.propsB
};
But if you want to make it shorter, you can give yourself a reusable utility function:
function pick(source, ...props) {
const result = {};
for (const prop of props) {
result[prop] = source[prop];
}
}
and then use it in AddProductPage:
function AddProductPage(props) {
const comp1Props = pick(props, "propsA", "propsB");
const comp2Props = pick(props, "propsC", "propsD", "propsE");
return(
<React.Fragment>
<Component1 {...comp1Props}/>
<Component2 {...comp2Porps}/>
// And so on...
</React.Fragment>
);
}
(Some would shoehorn that into a reduce call, but there's no need.)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments