in

The Props Object – DEV Community




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) => {
...
}
Enter fullscreen mode

Exit fullscreen mode



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>
Enter fullscreen mode

Exit fullscreen mode

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>
Enter fullscreen mode

Exit fullscreen mode



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 as

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

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

Exit fullscreen mode



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 };
Enter fullscreen mode

Exit fullscreen mode

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>
Enter fullscreen mode

Exit fullscreen mode



Which, when created, looks like

const WrapperComponent = (props) => 
    return <div>  props.children  </div>
❵
Enter fullscreen mode

Exit fullscreen mode



Okay Captain Obvious

Maybe that seems apparent. It wasn’t for me and it took awhile for me to grasp. When I did it helped a lot. When you get over this hump, React seems 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] 
Enter fullscreen mode

Exit fullscreen mode

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>] 
Enter fullscreen mode

Exit fullscreen mode

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.



Source: https://dev.to/mhf/the-props-object-1em8

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Automates CP 2077's "Breach Protocol" hacking minigame

A safe and simple notification tools For developers and everyone can push notifications with API