Props in React

Relation between Components and normal functions in JavaScript

We know that react components are the building blocks that can be reused again and again in building the UI. Before jumping into the main difference between the state and props, let’s see how a component in react is related to a normal function in javascript....

State in React:

A state is a variable that exists inside a component, that cannot be accessed and modified outside the component, and can only be used inside the component. Works very similarly to a variable that is declared inside a function that cannot be accessed outside the scope of the function in normal javascript. State Can be modified using this.setState. The state can be asynchronous. Whenever this.setState is used to change the state class is rerender itself. Let’s see with the help of an example:...

Props in React:

React allows us to pass information to a Component using something called props (which stands for properties). Props are objects which can be used inside a component. Sometimes we need to change the content inside a component. Props come to play in these cases, as they are passed into the component and the user.....

Difference between props and state:

PROPS STATE The Data is passed from one component to another.The Data is passed within the component only.It is Immutable (cannot be modified).It is Mutable ( can be modified).Props can be used with state and functional components.The state can be used only with the state components/class component (Before 16.0).Props are read-only.The state is both read and write....