Skip to content

[Documentation] Re-add "Transferring with ... in JSX" to "JSX In-Depth / Spread Attributes" #121

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.

Sign up for GitHub

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

Merged
merged 4 commits into from
Oct 13, 2017
Merged

[Documentation] Re-add "Transferring with ... in JSX" to "JSX In-Depth / Spread Attributes" #121

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0268625
docs/update-jsx-in-depth/spread-attrs
hellobrian Oct 10, 2017
4c5f48c
fix: re-add spread attrs docs and update example
hellobrian Oct 10, 2017
8ccb0c4
Rewrite spread attrs section based on feedback
hellobrian Oct 12, 2017
39ef13f
edit for grammar
hellobrian Oct 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 24 additions & 1 deletion content/docs/jsx-in-depth.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,30 @@ function App2() {
}
```

Spread attributes can be useful when you are building generic containers. However, they can also make your code messy by making it easy to pass a lot of irrelevant props to components that don't care about them. We recommend that you use this syntax sparingly.
You can also pick specific props that your component will consume while passing all other props using the spread operator.

```js{2}
const Button = props => {
const { kind, ...other } = props;
const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
Copy link
Contributor Author

@hellobrian hellobrian Oct 12, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In response to: #121 (comment) (comment thread was getting long)

Thanks for your patience, I think I finally understand what you've been trying to say 😭
My motivation for re-adding this documentation was to surface how you can pass unknown props via spread attributes. But, I can see now that there are more considerations that need to be made when opting to use this syntax, which is what you were trying to communicate.

Thanks again for being so thorough with this PR, @bvaughn

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No problem at all 😄 It's easy to miscommunicate on a PR.

return <button className={className} {...other} />;
};

const App = () => {
return (
<div>
<Button kind="primary" onClick={() => console.log("clicked!")}>
Hello World!
</Button>
</div>
);
};
```

In the example above, the `kind` prop is safely consumed and *is not* passed on to the `<button>` element in the DOM.
All other props are passed via the `...other` object making this component really flexible. You can see that it passes an `onClick` and `children` props.

Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don't care about them or to pass invalid HTML attributes to the DOM. We recommend using this syntax sparingly.

## Children in JSX

Expand Down