Understanding Props in React.Js

Bhaskar Jha
2 min readMay 16, 2021

--

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.

source:- google images

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”.

without using props
Look of the webpage

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.

with the use of props.

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.

--

--

Bhaskar Jha

Software Developer by profession, Finance Enthusiast, and Tech lover, Noob at E-sports. Everyone should watch anime and make 2 friends join you(MLM😂)