ReactWithMe: What are React Props and How Should I Use Them?

ReactWithMe is a series for aspiring and seasoned React developers who want to strengthen their foundational knowledge of the most popular frontend library. In this blog post, we will explore the basic fundamentals and use-cases of props.

Learning React is a journey. But it’s fair to say that if you have a deep understanding of state, props, and hooks, then you pretty much know all the fundamentals. For this part of my series on React, I’ll be going over the basics and fundamentals of props with illustrations and example code to help cement this key concept into your head. To properly understand props, it’s also important that you first understand components in React. If you want to read up more on this foundational building block of React applications, you can read my article here where I give a theoretical summation of the concept of React components.

I’ve used the analogy before, but building in React is much like building with Legos. Any React application can be broken down into a single, several, or possibly hundreds of tiny pieces we call components. These components are basically reusable and isolated pieces of code that assemble together to make one larger application. The separate and isolation make it not only easy to edit and tweek without having to change the entire application, but it also makes an application incredibly scalable and clean since the architecture is built off of easily available and readable functions.

So, let’s take an imaginary application. Say we now have hundreds of different components working together to build our app. How exactly do these components communicate with each other? How do that pass data between each other while also working dynamically?

Props to the rescue. Props is a special keyword in React (standing for “properties”) and is specifically designed for this purpose. Important to note is the flow of the data’s direction. Props follow a unidirectional flow from top to bottom, or more accurately from parent to child elements. Additionally, the props are read-only, meaning that information traveling from a parent element to a child should not be modified or edited by the child element.

The best way to learn about props is to see it in action so let’s play around!

class ParentComponent extends Component {  
  render() {
    return (
      <h2>
        "This is the parent component."
        <ChildComponent />
      </h2>
    );
  }
}

Here is the code snippet for the ChildComponent:

const ChildComponent = () => {  
  return <p>"This is the first child component!"</p>; 
};

This simply will return something that looks like this.

It works. It makes sense. But we can quickly see one big problem. What if we were to have four child elements like this?

class ParentComponent extends Component {  
  render() {
    return (
      <h2>
        "This is the parent component."
        <ChildComponent />
        <ChildComponent />
        <ChildComponent />
        <ChildComponent />
      </h2>
    );
  }
}

Our application would look something like this:

This obviously isn't how we want our new feature to display. Each new line should give its own number rather than repeatedly claiming to be the first child. What we want to do is make this program dynamic for various outputs. We can do this by employing props.

If you’re already familiar with HTML, you should know that we can define our own attributes for different tags.

<a href="www.hashnode.com">Start your blog with Hashnode!</a>;

Luckily we can do the same exact thing in React. We can use these attributes to utilize interpolation.

<ChildComponent attributeOne={ first_value } attributeTwo={ second_value }/>

For our application, I'll declare a text attribute and assign it a desired string:

<ChildComponent text={ "This is the first child component!" }/>

Now that our child component has a value and a property, we can utilize props.

const ChildComponent = (props) => {  
  return <p>"This is the first child component!"</p>; 
};

However, we still need to actually render the text in our application using interpolation.

We have the props argument passed, but what does it actually hold? Let's see:

console.log(props)

Object {text: "This is the first child component!"}

A Javascript object! Meaning that we can use dot.notation to grab the property that we want.

const ChildComponent = (props) => {  
  return <p>{ props.text }</p>; 
};

And voila! We get:

Now that we've managed to dynamically program our application with one element, we can do the same for the remaining child elements.

class ParentComponent extends Component {  
  render() {
    return (
      <h2>
        "This is the parent component."
        <ChildComponent text = {"This is the first child component!"} />
        <ChildComponent text = {"This is the second child component!"} />
        <ChildComponent text = {"This is the third child component!"} />
        <ChildComponent text = {"This is the fourth child component!"} />
      </h2>
    );
  }
}

And there we have it. We've done a basic utilization for props that can allow for more dynamic programming. Of course, this is a very simple and unrealistic application. Later on I will show more advanced ways of using props in React, but this should serve as a basic template to understand why and how they can be so powerful and useful.