From e3097af2f7730b5c4f4953b5f67924dd12562c2e Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Sat, 10 Mar 2018 09:25:35 -0600
Subject: [PATCH] Add Who Is Your Favorite Child? as a react til

---
 README.md                           |  3 +-
 react/who-is-your-favorite-child.md | 44 +++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 react/who-is-your-favorite-child.md

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 (
+    <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).