Props in React Js

 Introduction

In React , the modularity of components where all the logic is separate and not dependent on each other but as you know, the parent component and child component are connected as the child component called in the parent component . When they wanted the values from parent component , they will just use props to pass the state between the components. Props play a important role in passing data from one component to another component and that's how modularity achieves.

Props are the html attribute that takes the value in the left side where you can also pass the state in the jsx object and any value that is achieved in the parent component. By it's name it is properties which in short called props as they play a role like html properties which used as the properties of component.  

As, you can see in the picture below the addNewTodo is the value which is passed to addNewTodo prop that will be accessed in the Todo component by the argument.



You will access the properties just the way you access the value of objects . Inside the component , props are accessed as a object where you can use the value from the parent component . Props are read only values and they cannot be modified and mutated in the child component and will only be read in the child component. 


Just think of the function where you access the arguments works same as component.
Props are like the parameter we pass  parent to child and the component access them by the arguments.

Props VS State

Many developers are confused between the prop and state they are both are used for state management and to give value to component so that the value displayed in the web.

1. Props cannot be modified or mutable whether state can be modified or updated
2. Props can be used in functional and class components and state can also be used in both earlier state can only be used in class components.
3. Props are generally used for the pass the data from parent to child whether state is used to store the data of the component that have to rendered to the view.
4. Updation of props are from parent to child whether state are generally updated by used interaction ( event handlers) .

Props Drilling or Prop Chaining

Prop Drilling is a concept where there is a chain of parent and child component . For example , you father , then grandfather , grand grandfather , grand grand grandfather etc. Where there is large chain of components and we need to pass some value from top level component to the lowest component in the chain , then we need to pass that prop to every component between them event they are not using the value , they need to access the value to pass the value to child component . This scenario is called prop drilling . To prevent this , we have a concept of context api that frees us from prop drilling and we don't need to pass data form every component.

Conclusion

Prop is a very concept to understand when you are starting to learn react js , where the react is only know about its modularity of components and state management which cannot be achieved without the props.

Thank you for reading :)

Comments

Post a Comment

Popular posts from this blog

Learn React Router v6 ( Part - 2)

Image
  Introduction In this section of react-router learning we can explore how we can read the data from the backend apis and send http request with the react router with the different functionalities  .  Data fetching and sending data back to the server is the most important process which react router make simpler and easier to understand providing error handling , fetching data , sending data , loader etc. Let's explore some advance concepts of react router makes react developers more simpler. 1) Loader  Loader loads the data from the backend apis and we can use the loaded data in our react web applications. We cannot send http requests back to the server instead get the data from the server and just use them to display some lists or information in the components We have two steps to implement loader into the system . First step :- We need to define the loader property in the route definitions object to load the data . This takes the function as a parameter where ...
Read more

Why use Typescript ?

Introduction When I was using JavaScript , there is an inside joke in our team if you don't know coding then you need to use typescript . As Typescript provides you the types that make you write better code with less mistakes before compilation.  It's all good using typescript but seriously why even barely use typescript for just types , if you know what you are coding , and know all you variables because you give them good naming that make you help understand the code of which is used for.   Obviously , if you write exactly you wanted and you are a solo developer without any team or any interference, why even bare learning types ? Why even bare learning typescript ? Correct question and on point ! But do you know  when you write code on Friday with the strategy you made and when you come again on Monday  , writing the code with the exact same strategy as Friday is not possible and  you can make mistakes . You know , time are bad sometimes and you can't rem...
Read more

What is Single Page Application Routing ?

Image
  Single Page Application Routing? Earlier , we used to serve different web pages for the URL whenever the user redirects to the different path and whole application reloads where the sending http request to backend makes the application slower . So , in react there is a package name React Router which makes the multi page application feel to the single page application and the navigation concept in react seems feasible . Single Page Application (SPA) where the whole application load at once and whenever user visits some path, it will fetch the data from the server for the particular component and make that page visible to the user which feels like multi page routing. React Router package manager installed by npm  , and very important concept in react for the navigation  without the react router we cannot perform navigation in the single page application . There are three steps to implement the react router and navigate through the different components after installi...
Read more