What is props & how to use it in React?
Tags: javascript, react
Published: 2020-08-16 18:22:23

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](https://dev.to/singhbipin2117/how-to-create-simple-component-in-react-ec5)

## 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)
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xis0jw5elikonzdzd3yo.png)

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.