React.js : Props

Passing dynamic data through React components using Props.

React.js : Props

Imagine as a React Developer you're being entrusted to assemble the Avengers .

You're given "Genesis - A SuperComputer" to create / assemble the Avengers.

  • The 1st Avenger would be Tony Stark / Iron Man.

In the App.js file in the ./src directory, the code to create the Iron Man is typed.


Iron Man is successfully created.

Screen Shot 2022-03-16 at 12.29.34 PM.png

  • To create Captain America & Hulk you proceed to copy the codes written for Avenger - Iron Man and make the changes in their name and superpower.

Avenger 2.png

Before pressing the final button to create Captain America & Hulk you realise that you'd be creating 2 more copies of Iron Man.

Screen Shot 2022-03-16 at 12.37.05 PM.png

Even if you proceed to change the First Name & Last Name to Steve Rogers respectively, it'll create 3 copies of Steve Rogers / Captain America.


Screen Shot 2022-03-16 at 12.44.26 PM.png

In order to solve this issue, we would use props.

Now let's find out how we use it.


Screen Shot 2022-03-16 at 12.56.42 PM.png

Well this approach looks clean. There are no more copies of the same Avenger. Let's try to populate the remaining 2 Avenger fields.


Screen Shot 2022-03-16 at 1.05.30 PM.png

Awesome, now you have the Avengers to carry out the specific mission.

Let's summarize Props.


  • Props or properties are the read only components.
  • Props are objects having an attribute of a tag and are helpful in passing data from one component to another.

Thanks for reading.

Did you find this article valuable?

Support Devkant Swargiary by becoming a sponsor. Any amount is appreciated!