What is props & how to use it in React?

Every javascript framework has a different way of data handling and manipulation. React has a different way to handle and manipulate data flow compare to other javascript frameworks that's why it become's difficult to understand some concept like props, state and so on.

To understand how props works in react, first we have to understand what is component in react and how it works. So i strongly recommend to refer my post How to create simple component in React

What is props?

React is javascript component based library which divides ui in a small reusable pieces. In some cases we need to also pass data between component to communicate with each other.

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

Data with props is passed in uni-direction flow(Parent to Child).

Props data is read only which means its value can not be changed from child component.

Let's see how props work with an example.

1. Define an attribute and its value.
2. Pass it to the child component.
3. Render the props data.

Understand how props works by an example.

First create a parent component

function ParentComponent() {
 return (
  <h1>I am parent component</h1>
  <ChildComponent/>
 );
}

Create a child component

function ChildComponent() {
 return <p>I am child component</p>
}

Let's call a child component multiple times in parent component.

function ParentComponent() {
 return (
  <h1>I am parent component</h1>
  <ChildComponent/>
  <ChildComponent/>
  <ChildComponent/>
  <ChildComponent/>
 );
}

Output of above code will be.

I am parent component
I am child component
I am child component
I am child component
I am child component

But our goal is to print dynamic data in output.

To achieve this we have to pass data from parent component to child using props.

As we learn before props can be passed as an attribute and its value.

As we know how we can define an attribute in an image html tag.
<img src="img-name.jpg">

The same way we can define an attribute and assign a value with interpolation {} in a react component.

<ChildComponent firstAttribute={} secondAttribute={}/>

Let's declare a text attribute and it's value to child component.

<ChildComponent text={I am first child component}/>

The attribute we pass in an component is received as an argument in child component like a javascript function is receiving an argument

 # Javascript function
function multiplication(fistArgument, secondArgument) {
 return fistArgument * secondArgument;
}

In the same way child component is also receiving a props as a argument

function childComponent(props) {

}

Before using props directly first logs it to the console and have a look to its value.

console.log(props)

As we can see props is an javascript object. In javascript we can access object key with doc(.) notation.

Let's render props in child component with an interpolation.

function ChildComponent(props) {
 return <p>{props.text}</p>
}

Also pass props to other child component.

function ParentComponent() {
 return (
  <h1>I am parent component</h1>
  <ChildComponent text={I am a first child component}/>
  <ChildComponent text={I am a second child component}/>
  <ChildComponent text={I am a third child component}/>
  <ChildComponent text={I am a fourth child component}/>
 );
}

Output will be

I am parent component
I am first child component
I am second child component
I am third child component
I am fourth child component

Hope this post will help you understand props in react.
Feel free to left out comment below if you have any question.

Keep learning.