The Props Object

What is the Props Object?

Okay, so you've probably gotten far enough into React to feel like you can make things work. You want to go deeper and start making components... then you run into props.

const MyComponent = (props) => {...}

Okay. It's an argument. But why?

Every React Component gets a props object.

All you have to do is create a function with a capital letter and React does some magic and, presto chango, you have a props object.

How Do We Use It... properly?

Let's take a look at MyGreetingComponent, which when rendered looks like:

Now the code

...<div id="greeting-section">  <MyGreetingComponent hello name="Joe" /></div>

Here we are passing data (hello name="Joe") to our component through what seem to be HTML attributes.

But really we're passing an object as an argument

const props = Object.freeze({ hello: true,name: "Joe",children: undefined })...<div id="greeting-section">  {MyGreetingComponent(props)}</div>

STOP

And Take A Moment And Study The Last Two Code Blocks

The above code and the code block before it are identical in function. This is what's going on under the hood in React when you use your component. It's just a function call with an immutable object as an argument. Here they are again:

...<div id="greeting-section">  <MyGreetingComponent hello name="Joe" /></div>// Is the same asconst props = Object.freeze({ hello: true,name: "Joe",children: undefined })...<div id="greeting-section">  {MyGreetingComponent(props)}</div>

So why is that important to know?

Well Because React is powerful, but confusing to look at.

For instance, hello is true? Yes! Because that's how you would interpret an HTML element that just has an attribute name. It becomes true by stating it. That means React is going to do some magic and now the HTML hello becomes hello: true in the props object.

It gets confusing looking at HTML and Javascript (and CSS) in the same file. But sometimes things are just plain confusing.

Like...

What the heck is children props?

Let's look at our example again.

props = { hello: true, name: 'joe', children: undefined };

Notice that children is a prebuilt property in the props object. We didn't create it. Also it is pre-set to undefined. We've already discovered that the props object comes prebuilt into every React Component.

So why is this children property prebuilt into our props object?

Which, when called, looks like

<WrapperComponent>  <MyComponent text={someExplainerTest} />  <div>Sometimes...</div>  <div>many...</div>  <div>many...</div>  <div>many children!</div></WrapperComponent>

Which, when created, looks like

const WrapperComponent = (props) =>     return <div>  props.children  </div>

Okay Captain Obvious

Maybe this all seems apparent. It wasn't for me. It took awhile for me to grasp. But when it click, it helped a lot. And after getting over this hump, React seemed to have

But

Let's look a little closer and see that it's potential and pain points really come from understanding what it's doing, again, under the hood.

props =  hello: true,          name: "Joe",          children: [Object, Object,          Object, Object, Object] 

In the console, props.children now looks like the above. The Objects here have the function calls to create each child.

We can maybe better think of it like this.

props =  hello: true,          name: "Joe",          children:          [<MyComponent />,          <div>, <div>, <div>, <div>] 

It takes some mental gymnastics to see it this way, but so does seeing HTML in Javascript in general.

But when it finally clicks, we see the props object is just passing down values, objects and functions from parent to child, just like Javascript does normally.

The catch is the data only goes from parent to child. But that also makes it clear because data is only going one way.

Final Thoughts

Remember it's all Javascript

Therefore React has all of the "features" of Javascript. As an example, objects are passed as reference while primitives are not. So think about what that might mean to React as it checks the diff and decides what to re-render in the DOM tree.

You can find a lot of blog posts about data flow and state management in React which is the next step to take. Just beware, you'll end up down some deep rabbit holes, which can be fun but also very time consuming.