0

I can't come up with a way to do it, but what I want is:

<ColumnDef key="label" ...createCommonColumnProps.call(this, {somestuff}) />
<ColumnDef key="count" ...createCommonColumnProps.call(this, {someOtherStuff}) />
<ColumnDef key="value" ...createCommonColumnProps.call(this, {yetOtherstuff}) />

I'm hoping it stupidly simple and I'm just being an idiot, but I can't find a way to do it without creating variables like

<ColumnDef key="label" {...column1} />
<ColumnDef key="count" {...column2} />
<ColumnDef key="value" {...column3} />

There are about 5 props, some of which are affected by the object passed to the function.

When I'm trying this in the chrome devtools console (just the js part, not the jsx part), I'm seeing things like this:

> function a() {
   return {a:1, b:2}
 }
undefined
> y = {... a()}
VM341:1 Uncaught SyntaxError: Unexpected token ...
> x = ... a()
VM368:1 Uncaught SyntaxError: Unexpected token ...
> x = {a:1,b:2}
Object {a: 1, b: 2}
> y = {...x}
VM888:1 Uncaught SyntaxError: Unexpected token ...
Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153
boatcoder
  • 17,525
  • 18
  • 114
  • 178

1 Answers1

0

The JSX object expansion syntax looks like:

{...<expression>}

Where expression returns a reference to an object.

So in your case it would be

<ColumnDef key="label" {... createCommonColumnProps.call(this, {somestuff})} />

UPD to reflect your question update:

When I'm trying this in the chrome devtools console (just the js part, not the jsx part), I'm seeing things like this:

That's happening because even though JSX object spread syntax is looking similar to the non standardised yet ES object spread syntax - they are not interchangeable (and the chrome does not support the latter yet).

So, just use it exactly as I demonstrated in the example above.

zerkms
  • 249,484
  • 69
  • 436
  • 539
  • Maybe it's just the chrome console, but I'm running into this: ```x = ... a(); VM368:1 Uncaught SyntaxError: Unexpected token ...``` – boatcoder Oct 27 '16 at 20:55
  • @boatcoder what exactly do you run? Google chrome does not support JSX. – zerkms Oct 27 '16 at 20:57
  • But it does support most of ES6 – boatcoder Oct 27 '16 at 20:57
  • It does. JSX is an independent standard though. What exactly do you run in console and what is the problem now? – zerkms Oct 27 '16 at 20:58
  • Updated the question, beginning to think this is a chrome console limitation, going to have to try it with babel now. – boatcoder Oct 27 '16 at 21:04
  • @boatcoder you are confusing the ES6 object spread syntax (which actually is not standardised yet) and JSX object spread syntax. They look similar but totally independent things. Don't treat them interchangeable. Your initial question is about JSX object spread - so use it in JSX as I shown in the example. – zerkms Oct 27 '16 at 21:07
  • I was indeed confusing them and was not aware the they were different. I also thought there was more es6 in chrome than there actually was. – boatcoder Oct 27 '16 at 21:16
  • 1
    @boatcoder well, chrome supports the ES2015 entirely (but modules), ES2016 entirely, and ES2017 partially. The object spread is simply not a real standard yet https://github.com/tc39/proposals Additionally see http://kangax.github.io/compat-table/es6/ – zerkms Oct 27 '16 at 21:19
  • @boatcoder: `x = ... a();` is not valid ES6 and wouldn't be allowed in any proposal either. **`...` [is not an operator](http://stackoverflow.com/q/37151966/218196)!** It's part of specific syntax constructs such as array literals, array destructuring, function calls, function definitions (all ES6), object literals, object destructuring (proposal) and JSX elements (non-standard). – Felix Kling Oct 27 '16 at 23:08