Prop, Lock, and Drop it

Understanding Props & Hierarchy in React

In React, we have the ability to pass and share certain information between components with the help of using props (AKA properties). Props are very similar to function arguments in JavaScript and attributes in HTML.

To pass around props, the components are structured in a form of a hierarchy. Every component underneath another in this hierarchy is referred to as a child.

Understanding these concepts as a new React dev can seem confusing, so let’s take a look at props & the hierarchy of components

Props:

Here’s a quick example of a prop:

If this is your first time to React, this might seem a bit overwhelming

First, let's look at line 2. In order to properly send props between our components, we need to make sure we import/export the components we need.

A good way to visualize the import & export feature is to think back on the relationships between the components we brought up earlier. Since ChildComponent is the child component of the ParentComponent, we can imagine the ParentComponent and ChildComponent as a father and son playing a game of catch, with a message written on the ball that can only be read by the child.

Parent component and Child component

So, let’s say ChildComponent throws the ball (exporting the class) to its parent component. The parent component then catches it (importing the class), writes the message we mentioned earlier (prop), then throws it back to the child component by using JSX to list the component and pass down props (line 10 from the prop example). The child then receives the written message (prop) and is able to do whatever is needed with it (use the prop however we like).

Let’s take a look at the message (prop) sent back to the child component.

In ChildComponent.js:

The prop passed down is viewable on line 9. Let’s look at our console for the prop itself:

Hierarchy:

As mentioned earlier, these components are structured in a hierarchy tree. In order to pass down info around, we need to first understand how hierarchy really works between these components.

Let’s draw a quick hierarchy tree for our code, along with some other example components:

More trees here just in case

On the right side of this amazingly drawn hierarchy tree, we can see how the App component is the parent of the ParentComponent, who is a parent of the ChildComponent. The tree can always have multiple components that branches off into a separate line of components, like on the left side of the tree. The tree can continue growing in length and can occasionally share a common ground with other components.

Drawing out a hierarchy tree for your relationships between your components in your React app can help visualize how the app will be set up and clear up any confusion on how the components relate to each other. Having a strong foundation with your app is key to having a successful project.