0

I'm trying to provide multiple optional attributes between components in React.

Example:

File: GenericCard.js

...
<Reactstrap.CardHeader {...this.props.headerArgs}>{this.props.cardheader}</Reactstrap.CardHeader>
<Reactstrap.CardBody {...this.props.bodyArgs}>{this.props.cardbody}</Reactstrap.CardBody>
<Reactstrap.CardFooter {...this.footerArgs}>{this.props.cardfooter}</Reactstrap.CardFooter>
...

I'm passing the props to this component as follow:

File: SpecificCard.js

<GenericCard cardheader={header} cardbody={body} cardfooter={footer} {...bodyArgs} />

And for example a different variant would be:

File: DifferentCard.js

<GenericCard cardheader={header} cardbody={body} cardfooter={footer} {...headerArgs} {...footerArgs} />

But such syntax would provide me with:

Uncaught ReferenceError: {the attribute that's missing} is not defined

Meaning, I'd like to be able to pass multiple options for different attributes using spread arguments, and were they to be not defined, I'd like the props to ignore them (as I understand that is the case for normal props?).

I thought of putting a default value, but I can't seem to find how to achieve that.

Any help would be much appreciated.

Edit:

I tried replacing my code as per @SteveTomlin suggestion:

File: SpecificCard.js

{...{...headerArgs, ...bodyArgs, cardbody: body, cardheader: header}}

After doing some debugging I realized that the issue was that the spread variables were passing the attributes themselves and not the variables, meaning I can't distinguish between the different variables when receiving it on GenericCard.js. Explanation in code:

File: SpecificCard.js

const body = <div>a</div>;
const bodyArgs = {attributeA: 'a', attributeB: 'b', attributeC: 'c'};

When I receive it on GenericCard.js the props looks like:

cardbody: "<div>a</div>"
attributeA: 'a'
attributeB: 'b'
attributeB: 'c'

So I don't have the bodyArgs as props but rather its attributes.

I tweaked Steve's suggestion to look like this:

{...{headerArgs: headerArgs, bodyArgs: bodyArgs, footerArgs: footerArgs, cardheader:header, cardbody:body, cardfooter:footer}}

Which then works fine, but necessitates defining all the variables on the parent component, which is not what I was aiming at. What I'm looking for is a way to do exactly that, but without having to define the empty variables (again, as I understood React works in the link above). Something like this should work in the solution just the same as the code above:

{...{headerArgs: headerArgs, cardheader:header, cardbody:body, cardfooter:footer}}

Can this sort of props behavior work? How can I do that? Shouldn't the child props ignore missing props? If not, can I put default values on the child component?

Yechiam Weiss
  • 261
  • 4
  • 12
  • do it like this: {...{...headerArgs, ...bodyArgs, cardbody: body, cardheader: header}} – Steve Tomlin Jan 13 '21 at 17:17
  • @SteveTomlin when passing the props or receiving? Because on the receiver side I need to put the props on different parts of the component. – Yechiam Weiss Jan 13 '21 at 17:28
  • And on the passing side I need to be able to not specify all the variables (i.e. for it to work even if I'm only sending cardbody, cardheader, cardfooter). – Yechiam Weiss Jan 13 '21 at 17:33
  • create it as an object first, adding the properties according to whatever if conditions, then pass the final object to the react component – Steve Tomlin Jan 13 '21 at 19:56
  • @SteveTomlin so you mean whatever the case, I will always need to define all the props in the passing side (even if they will be empty)? – Yechiam Weiss Jan 14 '21 at 07:28
  • Also: I now debugged and saw that when passing in such manner (`{...{...headerArgs, ...bodyArgs, cardbody: body, cardheader: header}}`) the spread variables are not being received as props (getting it as for example: `{...this.props.headerArgs}`) – Yechiam Weiss Jan 14 '21 at 07:37
  • OK I see the problem now! The transfer destructs my spread variables so if it `bodyArgs={attributes}` in `SpecificCard.js` then when `GenericCard.js` receives it, it only gets the `attributes` as props and not `bodyArgs` as props. Hence, I can't seem to distinguish between the different spread variables because they will all destruct to the attributes. I'll edit that in the post itself. – Yechiam Weiss Jan 14 '21 at 07:48

0 Answers0