What is ‘PROPS’ in React Js?

Other systems take a different approach to data flow and manipulation than React. So that, It can be somewhat difficult to understand the concepts like Props. React is a component-based library that divides the UI into little reusable components. In some instances, those components must communicate (send data to one another), and props are the means by which data can be passed between them.

In React, “props” is a special keyword that stands for properties and is used to transfer data from one component to another. The key thing to note here is that data with props is transferred in a one-way flow (from parent to child in one direction). Furthermore, props data is read-only, which means that child components do not alter data coming from the parent.

How to use PROPS in React?

There are few steps to follow to use a prop in React JS. They are,

1. Define an attribute and its value.
2. Pass it to child component(s) by using Props
3. Render the Props Data

In react we can create & call a React component inside another component. The problem here is that, when we call the Child Component multiple times, It always renders the same string again and again.

class component of the Parent function.

Output of the above class component.

But, since each child variable can have different data, we prefer to get dynamic outputs. Let’s look at how we can solve this problem with props.

STEP 01 : We already know that we can assign attributes and values to HTML tags. Likewise, we can do the same for React components. We can define our own attributes & assign values with interpolation { } like below.

<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’m the 1st child”} />

STEP 02 : Now let’s move the “I’m the1st child!” string around using props.
It’s really easy to pass props. We pass props into a React component in the same way we pass arguments to a function, and props carry all the required data.

Argument pass to a child component

STEP 03 : So far, we’ve produced an attribute and its meaning, then passed it through props, but we haven’t made it yet, so we can’t see it.

So that, we will render the props object by using string interpolation.

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.

Render prop wit text property.

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