What is “Props” and how to use it in React?

React has a different approach to data flow & manipulation than other frameworks, and that’s why it can be difficult at the beginning to understand some concepts like props, state and so on.

I believe it’s better to keep explaining them in separated posts and in this article, we’re going to focus on React’s Props feature and how to use it. 

To understand how props work, first, you need to have a general understanding of the concept of the components. If you don’t know much about components in React, I recommend to read first my previous article about React components.


What is Props?

React is a component-based library which divides the UI into little reusable pieces. In some cases, those components need to communicate (send data to each other) and the way to pass data between components is by using props.

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another

But the important part here is that data with props are being passed in a uni-directional flow. (one way from parent to child)

Furthermore, props data is read-only, which means that data coming from the parent should not be changed by child components.

OK now let’s see how to use Props with an example…


You can also learn how to use Props by watching my tutorial video below:

Using Props in React

I will be explaining how to use Props step by step. 

  1. Firstly, define an attribute and its value(data)
  2. Then pass it to child component(s) by using Props
  3. Finally, render the Props Data

In my previous article, I’ve shown how to create & call a React component inside another component. So in this example, we have a ParentComponent including another component (child):

class ParentComponent extends Component {  
  render() {
    return (
      <h1>
        I am the parent component.
        <ChildComponent />
      </h1>
    );
  }
}

And this is our ChildComponent:

const ChildComponent = () => {  
  return <p>I am the 1st child!</p>; 
};

The problem here is that, when we call the ChildComponent multiple times:

class ParentComponent extends Component {  
  render() {
    return (
      <h1>
        I am the parent component.
        <ChildComponent />
        <ChildComponent />
        <ChildComponent />
      </h1>
    );
  }
}

It always renders the same string again and again:

But what we like to do here is to get dynamic outputs, because each child component may have different data and let’s see how we can solve this issue by using props

1st Step: Defining Attribute & Data

We already know that we can assign attributes and values to HTML tags:

<a href="www.google.com">Click here to visit Google</a>;

Likewise, we can do the same for React components. We can define our own attributes & assign values with interpolation { }:

<ChildComponent someAttribute={value} anotherAttribute={value}/>

Here I’m declaring a “text” attribute to the ChildComponent and then assign a string value: “I’m the 1st child”. 

<ChildComponent text={I am the 1st child} />

Now the ChildComponent has a property and a value. Next, we need to pass it via Props.

2nd Step: Passing Data using Props

OK, now let’s take the “I’m the 1st child!” string and pass it by using props.

Passing props is very simple. Like we pass arguments to a function, we pass props into a React component and props bring all the necessary data.

Arguments passed to a function:

const addition = (firstNum, secondNum) => {  
return firstNum + secondNum;
};

Arguments passed to a React component:

const ChildComponent = (props) => {  
  return <p>I am the 1st child!</p>; 
};

Props are arguments passed into React components. — w3schools.com

Final Step: Rendering Props Data

Alright so far, we have created an attribute and its value, then we passed it through props but we still can’t see it because we haven’t rendered it yet.

Prop is an Object

In the final step, we will render the props object by using string interpolation:

{props}

But first log props to console and see what it shows:

console.log(props);

As we can see, Props returns back an object. In JavaScript, we can access to object elements with dot(.) notation. So, let’s render our text property with interpolation:

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

And that’s it! We’ve achieved to render the data coming from the parent component. 

Before closing, let’s do the same for other child components:

class ParentComponent extends Component {  
  render() {
    return (
      <h1>
        I am the parent component.
        <ChildComponent text={"I am the 1st child"} />
        <ChildComponent text={"I am the 2nd child"} />
        <ChildComponent text={"I am the 3rd child"} />
      </h1>
    );
  }
}

As we can see, each ChildComponent renders now its own prop data. So this is how we can use Props for passing data and converting static components into dynamic ones.


Recap:

  • Props stand for properties and is a special keyword in React
  • Props are being passed to components like function arguments
  • Props can only be passed to components in one-way (parent to child)
  • Props data is immutable (read-only)

Conclusion

Understanding React’s approach to data manipulation takes time. I hope my post helps you to become better in React. If you have any questions, comment down below. Next, I will be covering how to manage data with another special React feature: State.

If you want to learn more about Web Development, don’t forget to subscribe to our newsletter.

Thank you for reading!

Leave a Reply

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