[feature proposal] JSX "Object Literal Property Value Shorthand"

[tyler-dot-earth]

Common problem...

<SomeComponent propVariable={propVariable} />

I repeat "propVariable". I find myself doing this a lot... like, several times for one JSX object (usually a React component) is not uncommon.

Proposed solution...

<SomeComponent [propVariable] />

which would result to the same as the "common problem" example.

EDIT: Dan Abramov suggested this syntax instead:

<SomeComponent {propVariable} />

because "Using square brackets as in computed property name is confusing. In ES6 whatever’s inside brackets is a string name variable" and "[...] would have been more consistent [...]".

Inspired by:

• Shorthand property names https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015
• Computed property names: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names
• CSS attribute selector: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

[jkoudys]

Easy enough to do already in ES6 already with a spread + implicit prop names. I don't think we need more syntax muddying the waters when this is already solved.

<SomeComponent {...{propVariable}} />

for the above, or multiple like so:

<AnotherComponent {...{foo, bar, baz}} />

[sebmarkbage]

Duplicate of: https://github.com/facebook/jsx/issues/23

Also, see relevant discussion in: https://github.com/facebook/jsx/issues/37