The Props Object

What is the Props Object?

Okay, so you've probably gotten far enough into React to feel like you can do some damage. 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, 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.

const MyGreetingComponent = (props) => {
  return (
    <div className="greeting">
        {props.hello && <h2>Hello {props.name} from MyComponent</h2>}
        {!props.hello && <h2>Good Bye!</h2>}
    </div>
  );
};

Which when rendered with hello: true and name: 'Joe' looks like:

Now the code to call it

...
<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 to study these two code blocks

Here they are again

// Code block #1
...
<div id="greeting-section">
  <MyGreetingComponent hello name="Joe" />
</div>

// Code block #2

const props = Object.freeze({ hello: true,
name: "Joe",
children: undefined })

...
<div id="greeting-section">
  {MyGreetingComponent(props)}
</div>

These two code blocks 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.

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 just 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 can be difficult to look 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.

const props = Object.freeze({ hello: true,
name: "Joe",
children: undefined })

Let's simplify it for further examples

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={someExplainerText} />
  <div>Sometimes...</div>
  <div>many...</div>
  <div>many...</div>
  <div>many children!</div>
</WrapperComponent>

Which, when created, looks like

const WrapperComponent = (props) => ❴
    return <div className="wrapper" > ❴ props.children ❵ </div>
❵

Okay Captain (not so) Obvious

Let this all sink in. React seems to just make sense out of the box. But when it doesn't, it can really stump you. And it's usually about here with props that it trips people up. But after getting over this hump, React will seem 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

This article could have been called,

Why Does React Look Like HTML?

But that conversation becomes a distraction. For the geniuses at Facebook who created the React Library, the idea of HTML syntax being used in this way seemed to just make sense.

It didn't for me.

It took a while for this concept to click. But when it did, it helped a lot in making sense of props and eventually all of React. In the end

Remember it's all just 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 when you're passing props 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 find yourself down some deep rabbit holes, which can be fun but also very time consuming.

Comments

[Audrey Roy Greenfeld]

I've read this 3 times now and found my understanding of props improved every time. Thanks for writing this up!