[JSX] Attribute shorthand as es6 Objects

[ghost]

module.exports = React.addClass({
  displayName: 'someName',
  // ...
  render: function () {
    var className = this.state.active ? 'active' : ''
    return <div {className}>...</div>
  }
});

Ecvevalent to

module.exports = React.addClass({
  displayName: 'someName',
  // ...
  render: function () {
    var className = this.state.active ? 'active' : ''
    return <div className={className}>...</div>
  }
});

It's es6 feature http://wiki.ecmascript.org/doku.php?id=harmony:object_initialiser_shorthand
Sorry for my bad English :)

[ToucheSir]

I'd argue against this, as one would have to consider meaningless statements such as
<div {{prop}}>...</div>. Not sure if this only marginally more terse syntax is worth the possible ambiguity.

Also, jstransform should already allow for the object initializer shorthand outside of JSX attributes.

[ghost]

@ToucheSir mistakes like that you described, could be done with spread objects, but it was included in core..

[ToucheSir]

How so? Attempting to use var foo = {...bar, {baz}}, results a notable error in the compilation step. Do you have a specific example demonstrating said mistakes with spread attributes?

[ghost]

@ToucheSir like this -> <div {...this.props}>..</div>

[bloodyowl]

@vanesyan it's possible with the ES6 option :

<MyComponent {...{item, key}} />

compiles to

React.createElement(MyComponent, React.__spread({},  {item:item, key:key}))

I don't really get why the spread works on props "top-level" while this doesn't, but using an plain object does the job.

ref facebook/jsx#23

[ToucheSir]

@bloodyowl Good example. Would agree with @RReverser 's reasoning in the linked issue (explicit destructuring is less ambiguous and captures the process more effectively), but I suppose it's a rather subjective matter.

[zpao]

I feel like we've said no to this with good reason before but I can't find the link. Regardless, the discussion for extending semantics of JSX belongs in the issue @bloodyowl linked to. @sebmarkbage, perhaps you remember where we've talked about this before / can weigh in.

[moretti]

This is something that would be really handy in my opinion.
A lot of my render methods are similar to the following one:

render() {
  const { foo, bar, spam, eggs } = this.props;
  return (
    <div>
      <Component1 foo={foo} bar={bar} />
      <Component2 spam={spam} eggs={eggs} />
    </div>
  );
}

I don't really like using {...this.props}, because I prefer a more explicit way of passing properties down and I wish there was something similar to the ES6 object initializer shorthand.

Too bad that <Component foo /> has a different meaning in JSX 😄

Maybe this alternative is good enough, though:

render() {
  const { foo, bar, spam, eggs } = this.props;
  return (
    <div>
      <Component1 {...{foo, bar}} />
      <Component2 {...{spam, eggs}} />
    </div>
  );
}

[RReverser]

With https://github.com/RReverser/es-borrowed-props proposal, you will be able to:

render() {
  return (
    <div>
      <Component1 {...{ this.props.foo, this.props.bar }} />
      <Component2 {...{ this.props.spam, this.props.eggs }} />
    </div>
  );
}

Until that, I'm afraid, destructuring is your best solution.

[brigand]

It's common to use blacklist for passing props in wrapper components, so you could use the inverse: whitelist.

render() {
  const { foo, bar, spam, eggs } = this.props;
  return (
    <div>
      <Component1 {...whitelist(this.props, 'foo', 'spam')} />
      <Component2 {...whitelist(this.props, {spam: true, eggs: true})} />
    </div>
  );
}

// unreadable example implementation
const whitelist = (obj, ...args) => _whitelist(obj, _flatten(args.map(_whitelistKeys)));
const _whitelistKeys = (x) => typeof x === 'string' ? [x] : Object.keys(x).filter((key) => x[key])
const _whitelist = (obj, keys) => keys.reduce((acc, key) => { acc[key] = obj[key]; return acc }, {}) ;
const _flatten = (xss) => Array.prototype.concat.apply([], xss);

It's probably best to solve this outside react, like blacklist, classnames, and other similar useful modules.

[zpao]

We're deprecating our own JSX transform so going to close this out.