Merge pull request #121 from hellobrian/patch-1

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

content/docs/jsx-in-depth.md

@@ -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";
+  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