Proposal: allow "nameless" elements to represent plain objects

[rchanou]

Example:

const sharedProps = <
  type='button'
  style={{ background: 'red', color: 'white' }}
/>;

const buttonElement = <button 
  {...sharedProps}
  onClick={doSomething} 
/>;

const anotherButtonElement = <button 
  {...sharedProps} 
  onClick={doSomethingElse} 
/>;

The main purpose for allowing this would be to ease refactoring. If you wish to pull out props into an object, currently you have to change prop={value} to prop: value, for all of them. The syntax above allows simple cut-and-paste.

Making JSX more like JS would accomplish the same goal, but this seems less drastic.

Edit: OK, so this might be problematic because spaces are currently allowed between < and the tag name. I just never noticed because I never write it that way. Regardless, some sort of JSX object declaration syntax would be nice.

[rchanou]

Never mind, I came up with a better proposal.