Understanding Props in React.Js
LET’S understand Props with working examples in order to get the concept and it’s execution right.
Getting started with react could be overwhelming , One of the new concept that you first encounter while learning react would be of Props.
First you must know Components it is basically a function in javascript that let you split the UI components into smaller pieces that are independent of each other and thus helps in reusing it in multiple areas in a webpage independently.
Eg:- In this image we can have box component that can be used to create box 1 ,2,3 respectively and used in different places in the web page independently without spending time on coding it again.
Components accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
Lets understand with an example we will be creating a webpage containing information about “my contacts”.
Now we would be creating the same webpage but now with using the props. Thus we would create a card component and pass “props” as input. note:- we can name props anything like "message" , "xyz" anything it is arbitrary.
Then we replaced the “name”, “image”, ”contact details” of each component with “props.name”, “props.img” , “props.tel” etc. so that we can access these individual value with these give name when we call the </card> component.
Then we assign different values to these individual </card> components and can be used anywhere inside the webpage to create as many contacts as possible.
NOTE: The components must be a pure function in order to execute it.
