The Props Object
Published: 2021-10-08 02:18:52

## 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***.

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

## Okay. It's an argument. But why?

Every `React Component` gets a `props object`.

<p align="center">
<img width="400px" src="https://media2.giphy.com/media/XxGg7ju2MzS2TUuqqr/giphy.gif?cid=ecf05e4782ej87q6hu090atvqyr9fmnxhgf1l0nrfht7o6sq&rid=giphy.gif&ct=gf" />
</p>

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`.

```js
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:

<p align="center">
<img width="400px" src="https://i.ibb.co/dpKzfbj/Screen-Shot-2021-10-07-at-6-47-54-PM.png" />
</p>

### Now the code to call it

```js
...
<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_**

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

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

<p align="center">
<img width="400px" src="https://media4.giphy.com/media/f3pwap89bizwIjbice/giphy.gif?cid=ecf05e47424wm0sosyy480mul2z80kv1j825uewabtyma6gs&rid=giphy.gif&ct=g" />
</p>


### And take a moment to study these two code blocks
**Here they are again**

```js
// 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. 🧐

<p align="center">
<img width="200px" src="https://media0.giphy.com/media/RLE2Q5ajPa6GgUxe1z/giphy.gif?cid=ecf05e4795wynx1zu4s4e5xlvkd6afd770soqm2qieyag3n5&rid=giphy.gif&ct=g" />
</p>

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.

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

Let's simplify it for further examples

```js
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?**

<p align="center">
<img width="600px" src="https://i.ibb.co/QHnD9zH/Screen-Shot-2021-10-07-at-6-01-21-PM.png" />
</p>

### Which, when called, looks like

```js
<WrapperComponent>
  <MyComponent text={someExplainerText} />
  <div>Sometimes...</div>
  <div>many...</div>
  <div>many...</div>
  <div>many children!</div>
</WrapperComponent>
```

### Which, when created, looks like

```js
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

<p align="center">
<img width="600px" src="https://media4.giphy.com/media/3o84sq21TxDH6PyYms/giphy.gif?cid=ecf05e47gmkhujlud37rs0zirf614ozt40coaknbjccyr41l&rid=giphy.gif&ct=g" />
</p>

### But

<p align="center">
<img width="600px" src="https://media3.giphy.com/media/MCZ39lz83o5lC/giphy.gif?cid=ecf05e47q2tyrd2u3ynwy81j2q58k8n56634ydum38jflsgw&rid=giphy.gif&ct=g" />
</p>

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.

```js
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

```js
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.

<p align="center">
<img width="300px" src="https://media3.giphy.com/media/At3ol9V0AIN2w/giphy.gif?cid=ecf05e47l8rfvaye0f33zaeu0kx1g93bjslewn765bpxhh28&rid=giphy.gif&ct=g" />
</p>

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](https://reactjs.org/docs/introducing-jsx.html) 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.***