From 02686259b5fdfb0450df7220f417f90da3ede02a Mon Sep 17 00:00:00 2001 From: Brian Han Date: Tue, 10 Oct 2017 12:02:44 -0500 Subject: [PATCH 1/4] docs/update-jsx-in-depth/spread-attrs re-add Transferring with ... in JSX docs previously published with React v15-ish --- content/docs/jsx-in-depth.md | 38 +++++++++++++++++++++++++++--------- 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md index 7acc3289..fb2c74b2 100644 --- a/content/docs/jsx-in-depth.md +++ b/content/docs/jsx-in-depth.md @@ -232,20 +232,40 @@ In general, we don't recommend using this because it can be confused with the [E ### Spread Attributes -If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent: +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. + +An alternative to spreading all of your props is to specifically list out all the properties that you would like to consume, followed by `...other`. ```js{7} -function App1() { - return ; -} +const { type, children, ...other } = props; +``` -function App2() { - const props = {firstName: 'Ben', lastName: 'Hector'}; - return ; -} +This ensures that you pass down all the props *except* the ones you're consuming yourself. + +```js{7} +const handleClick = () => console.log("handleClick"); + +const PrimaryButton = props => { + const { type, children, ...other } = props; + return ( + + ); +}; + +const App = () => { + return ( +
+ + Hello World! + +
+ ); +}; ``` -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. +In the example above, the `...other` object contains `{ onClick: handleClick() }` but not the `type` or `children` props. This makes a component like the `PrimaryButton` more reusable and flexible because it can extract a set of unknown properties like `onClick` in the above example. ## Children in JSX From 4c5f48c9e5a23962f7e53dbfa6c04209f518e236 Mon Sep 17 00:00:00 2001 From: Brian Han Date: Tue, 10 Oct 2017 13:59:40 -0500 Subject: [PATCH 2/4] fix: re-add spread attrs docs and update example --- content/docs/jsx-in-depth.md | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md index fb2c74b2..a27a4021 100644 --- a/content/docs/jsx-in-depth.md +++ b/content/docs/jsx-in-depth.md @@ -232,23 +232,36 @@ In general, we don't recommend using this because it can be confused with the [E ### Spread Attributes +If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent: + +```js{7} +function App1() { + return ; +} + +function App2() { + const props = {firstName: 'Ben', lastName: 'Hector'}; + return ; +} +``` + 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. An alternative to spreading all of your props is to specifically list out all the properties that you would like to consume, followed by `...other`. -```js{7} -const { type, children, ...other } = props; +```js +const { children, ...other } = props; ``` This ensures that you pass down all the props *except* the ones you're consuming yourself. -```js{7} +```js{6} const handleClick = () => console.log("handleClick"); const PrimaryButton = props => { - const { type, children, ...other } = props; + const { children, ...other } = props; return ( - ); @@ -265,7 +278,7 @@ const App = () => { }; ``` -In the example above, the `...other` object contains `{ onClick: handleClick() }` but not the `type` or `children` props. This makes a component like the `PrimaryButton` more reusable and flexible because it can extract a set of unknown properties like `onClick` in the above example. +In the example above, the `...other` object contains `{ onClick: handleClick(), type: "button" }` but *not* the `children` prop. This makes a component like the `PrimaryButton` more reusable and flexible because it can extract a set of unknown properties like `onClick` in the above example. ## Children in JSX From 8ccb0c426509e0ca6afe59d760846efee092f553 Mon Sep 17 00:00:00 2001 From: Brian Han Date: Thu, 12 Oct 2017 13:51:37 -0500 Subject: [PATCH 3/4] Rewrite spread attrs section based on feedback --- content/docs/jsx-in-depth.md | 35 +++++++++++++---------------------- 1 file changed, 13 insertions(+), 22 deletions(-) diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md index a27a4021..f57a44d6 100644 --- a/content/docs/jsx-in-depth.md +++ b/content/docs/jsx-in-depth.md @@ -245,40 +245,31 @@ 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. +This ensures that the component consumes the `kind` prop only, and passes down all other props via `...other`. -An alternative to spreading all of your props is to specifically list out all the properties that you would like to consume, followed by `...other`. - -```js -const { children, ...other } = props; -``` - -This ensures that you pass down all the props *except* the ones you're consuming yourself. - -```js{6} -const handleClick = () => console.log("handleClick"); - -const PrimaryButton = props => { - const { children, ...other } = props; - return ( - - ); +```js{2} +const Button = props => { + const { kind, ...other } = props; + const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton"; + return ); }; ``` -In the example above, the `...other` object contains `{ onClick: handleClick(), type: "button" }` but *not* the `children` prop. This makes a component like the `PrimaryButton` more reusable and flexible because it can extract a set of unknown properties like `onClick` in the above example. +In the example above, the `kind` prop is safely consumed and *is not* passed directly to the `