diff --git a/README.md b/README.md index c17c7de..750402d 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/). -_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) diff --git a/react/a-component-is-just-a-bag-of-data.md b/react/a-component-is-just-a-bag-of-data.md new file mode 100644 index 0000000..2b6666b --- /dev/null +++ b/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.Children.map(children || null, (child, i) => { + console.log(child); + return ; + })} + + ); +}; + +const App = () => ( +
+ + Click this span + +
+); +``` + +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).