Understanding Props in a Easy Way.

Props are nothing but the information which a parent component provides to its children component. That information could be any JavaScript value {for Ex: "functions", "Arrays", "Objects", "variables"}.

Why we need "Props" in the first place.

Example: Let's assume inside a deeply nested component I am displaying details of a particular book. Now to display data for that book I have to get it from the parent component of the parent component of that child component, Basically in simple language I am passing data from grand parent component to grand child component.

So how can I achieve it, By simply passing data via props. So the data is first fetched via API in the grand parent component then it is passed to the parent component of that child, And then at last from that parent the data is passed to child component.

And This all is done via props only, So this is why we need props for passing the data. We will see an example which will make this concept more clearer.

Example-:

1. App Component

2. Parent Component (2nd from top)

3. Child Component (3rd from top)

Above, There are 3 components One is App component where I am creating some dummy data(basically js objects). Then I am passing that dummy data into the child component of the App component, Which is Parent component. Inside Parent component I am getting data as parameters from the App. After getting data from App component I am again passing into the child component of the Parent, Which is Child component. In Child component I am again getting data as parameters from the Parent.

From all above points with examples you can clearly see how the data is passed from one component to a nested component just via props.

Again the data which is passed is dynamic for example If I try to change the data in the child component which we have got via props, Then the outcome we getting from mutations will be reflected in the Parent components as well. This is the beauty of "Props".

So This was all for today. To read more my articles in web development, Please do follow my account.