diff --git a/README.md b/README.md index dbf2c0e..48e0ebf 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_636 TILs and counting..._ +_637 TILs and counting..._ --- @@ -454,6 +454,7 @@ _636 TILs and counting..._ - [Use A Ref To Autofocus An Input](react/use-a-ref-to-autofocus-an-input.md) - [Use withRouter To Pass Down React-Router History](react/use-withrouter-to-pass-down-react-router-history.md) - [Visually Select A React Element For Inspection](react/visually-select-a-react-element-for-inspection.md) +- [Who Is Your Favorite Child?](react/who-is-your-favorite-child.md) ### ReasonML diff --git a/react/who-is-your-favorite-child.md b/react/who-is-your-favorite-child.md new file mode 100644 index 0000000..7379476 --- /dev/null +++ b/react/who-is-your-favorite-child.md @@ -0,0 +1,44 @@ +# Who Is Your Favorite Child? + +When we put some content inside the open and close tags of one of our +components, we get access to it as the `children` prop. + +```javascript +const Parent = ({children}) => { + return ( + +

These are my favorites:

+ {children} +
+ ); +} + +const App = () => ( +
+ + Greg and Marsha + +
+); +``` + +What happens if we also provide an explicit `children` prop to `Parent`? + +```javascript +const App = () => ( +
+ + Greg and Marsha + +
+); +``` + +Which will take precedence when we destructure `children` in the parent +component? + +In the example above, we'll still see `Greg and Marsha` rendered. The +content placed inside the tags will take precedence over the explicit +`children` prop. + +See a [live example here](https://codesandbox.io/s/kmo5lk2lr5).