Proposal: Syntactic sugar for props with same name as value passed

[Ben Heidemann]

Take the following component:

const Button = ({ disabled, onClick }) => (
  <button disabled={disabled} onClick={onClick} />
);

This is quite verbose due to the unnecessary repetition of disbabled and onClick.

In JS, we have a similarly verbose syntax which already has a shorthand:

const innerValue = 123;

const obj = {
  innerValue: innerValue,
};

// Equivalent to

const innerValue = 123;

const obj = {
  innerValue,
};

In JSX, it would be nice to be able to do:

const Button = ({ disabled, onClick }) => (
  <button {disabled} {onClick} />
);

This avoids collision with the boolean shorthand and feels consistent with the syntax for spreading props ({...props}).

[Ben Heidemann]

Whoops - looks like this is a duplicate of #23