Suggestion for JSX syntax simplification

[gebbber]

Suggestion

I would like to suggest enhancing the JSX specification to allow:

return <button {onClick}>Text</button>

to be parsed as equivalent to:

return <button onClick={onClick}>Text</button>

Rationale

This would improve readability and shorten line lengths, especially when several props are being used that share names with variables.

It would also tend to encourage adoption of variable and function names that match the intended prop names, such as function onClick(ev) {} instead of function clickHandler(ev) {}, which has enhanced readability in my own projects. (Once this convention is adopted, the present suggestion also reduces redundancy, again improving overall readability.)

Current Workaround

Current workaround is as follows, but is not quite as elegant:

return <button {...{onClick}}>Text</button>

Additional Suggestion

This enhancement suggestion could be taken further to allow an arbitrary number of comma-delimited arguments to be spread into props of the same names:

<component {arg1, arg2, etc} />

...equivalent to:

<component {...{arg1, arg2, etc}} />

...also equivalent to the "standard" syntax:

<component arg1={arg1} arg2={arg2} etc={etc} />

[sahithyandev]

The current workaround does look elegant to me. I don't think it's worth the time to implement your suggestion; when a simple workaround exists (and isn't too trivial). : )

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!