Add Who Is Your Favorite Child? as a react til

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
 

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 (
+    <React.Fragment>
+      <p>These are my favorites:</p>
+      {children}
+    </React.Fragment>
+  );
+}
+
+const App = () => (
+  <div>
+    <Parent>
+      Greg and Marsha
+    </Parent>
+  </div>
+);
+```
+
+What happens if we also provide an explicit `children` prop to `Parent`?
+
+```javascript
+const App = () => (
+  <div>
+    <Parent children={"Jan and Peter"}>
+      Greg and Marsha
+    </Parent>
+  </div>
+);
+```
+
+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).