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.

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

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

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.

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

Now let's find out how we use it.

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

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

Let's summarize Props.

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.