Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
bcheidemann opened this issue Jul 16, 2022 · 1 comment
Closed

Comments

@bcheidemann
Copy link

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}).

@bcheidemann
Copy link
Author

Whoops - looks like this is a duplicate of #23

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant