Add A Component Is Just A Bag Of Data 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/).
 
-_640 TILs and counting..._
+_641 TILs and counting..._
 
 ---
 
@@ -438,6 +438,7 @@ _640 TILs and counting..._
 
 ### React
 
+- [A Component Is Just A Bag Of Data](react/a-component-is-just-a-bag-of-data.md)
 - [Accessing Env Vars In create-react-app](react/accessing-env-vars-in-create-react-app.md)
 - [Alter The Display Name Of A Component](react/alter-the-display-name-of-a-component.md)
 - [create-react-app Comes With Lodash](react/create-react-app-comes-with-lodash.md)

react/a-component-is-just-a-bag-of-data.md

@@ -0,0 +1,49 @@
+# A Component Is Just A Bag Of Data
+
+If you write enough React using JSX, it is easy to forget that you're not
+working with markup. Everything -- `div`s, `h1`s, 3rd party components, your
+components -- all get boiled down to JavaScript objects full of data.
+
+Any given React component is really just a bag of data. Try doing a
+`console.log` to see. Here is an example from an [earlier
+post](https://github.com/jbranchaud/til/blob/master/react/dynamically-add-props-to-a-child-component.md).
+
+```javascript
+const ParentWithClick = ({ children }) => {
+  return (
+    <React.Fragment>
+      {React.Children.map(children || null, (child, i) => {
+        console.log(child);
+        return <child.type {...child.props} key={i} onClick={handleClick} />;
+      })}
+    </React.Fragment>
+  );
+};
+
+const App = () => (
+  <div>
+    <ParentWithClick>
+      <span>Click this span</span>
+    </ParentWithClick>
+  </div>
+);
+```
+
+Looking in the console, we see the following output:
+
+```
+Object {type: "span", key: null, ref: null, props: Object, _owner: Object…}
+ type: "span"
+ key: null
+ ref: null
+ props: Object
+  children: "Click this span"
+ _owner: Object
+ _store: Object
+```
+
+It contains information about the component itself and because of the tree
+structure of this data, you could potentially expand the `props` -->
+`children` sections several times for certain components.
+
+See a [live example here](https://codesandbox.io/s/l41pj382x7).