React Props and States
React, A JavaScript library for building User Interfaces (which I got from here) and even though it’s very popular in the javascript world.
React making life easier of SAP’s (single page application) by using the common word called component. The React components are easier to build and they are flexible (code once use many times). React makes many smaller apps by using many small components. These small app’s head up and forms into a gigantic App.
React has many cool features which take decades to count all of them, Just kidding (at least hours).
I hope Beginners and who are very new to react world fought many fights with Humpty-Dumpty brothers. i.e., Props and States. because they look, like siblings ( Twins ). Most of the React developer’s show much difference between props and states but while coding they look the same as again.
These two are very popular in the React world (most confusing too). These two words help a lot to develop the React apps but as a beginner, it's very hard to recognize the difference between them.
The most common differences in Humpty-Dumpty (props and state):
props are immutable whereas states are mutable,
states can be present in the local component.
props cannot be changed where the state can change by “.setState” method.
Although as a beginner, the whole lot of stuff is very confusing, so I bought a Brand New Story called Humpty-Dumpty story (same as the childhood one).
Story begins
Consider a scenario where Humpty-Dumpty is working in a restaurant. The role of Humpty is Server and Dumpty is a chef.
you are in the restaurant as the customer, you have ordered some food “ A ” which is available in the restaurant. Dumpty will prepare the order and send to you by the help of Humpty.
Consider that you are the user who is seeking for the User Interface, Humpty is the Props and Dumpty is the state and kitchen is the component.
From the above image, we can know that Dumpty pass the food to the user by using Humpty. So Humpty can pass the prepared food.
Dumpty will not come outside of the kitchen ( Component ). he is local to the Kitchen component.
Stop the Fairy Tale Drama ✋
Let's Start the Actual Terminology 👍
By considering the above story, the State can pass the Data from the local component to the actual UI by using the props. The prop is the short form for properties, The prop helps to pass the data from top to bottom because of the React, React uses the unidirectional data flow. so props pass the data from top to bottom. The state has the local data as in its own component, the data in the state can by change because it’s mutable. where Props are not mutable the data can not be changed. consider the above example the recipe cant be changed while reaching the customer as the same way props cant change its data. so props are immutable.
Let's dive into the code
The code for a simple Hello World in React.
In the above code, There is no State and prop. it's just rendering the Hello World. The Hello World is rendered in the Div tag with Id “app”
The code to Render the menu list :
Here, The menu is the state which is lying in its own component ( App )( line no 26 ). The list is the prop which is sending the state data ( menu array )( line no 30 ). so state sends the data by props to form the UI.
I Hope, This all makes sense to you. If it makes sense please do clap as many times as you can 👏👏 and share this to your world.
If you wanna share something to me, feel free to contact
Thank you, Let’s catch up with another article very soon✌️👍.
Happy React…!😊
