Props In React JS

Photo by Caspar Camille Rubin on Unsplash

Let's take an example if you want to print your family members' details that is the name, age, and profession, etc. Now, one way is you make one div for your info than another div for your mother, father, etc. It will look so clumsy something like this, a lot of div’s are used in the below example.

<div>
  <div>
     <p> name is manu </p>
     <span> age is 22 </span>
  </div>
  <div>
     <p> name is abc</p>
     <span> age is 27 </span>
  </div>
  <div>
     <p> name is xyz</p>
     <span> age is 25</span>
  </div>
<div>

So, in place of a big structure what we can do is make one common structure and then pass information in some way that we don’t have to create so many div’s. Here, comes the need for props in React JS.

What are props?

Props stand for “Properties. In technical terms, Props are arguments passed into React components or we can say props are like function arguments in JavaScript and attributes in HTML.

It is an object which stores the value of attributes of a tag and works similarly to the HTML attributes. It gives a way to pass data from one component to another component.

Props are immutable so we cannot modify the props from inside the component.

So now continuing our above example.

You just have to make one component Person.js and use props. In App.js you have to call the component with different parameters.

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
class App extends Component {
 render() {
  return (
   <div className="App">
     <Person name="Max" age="28" />
     <Person name="Manu" age="29" >My Hobbies: Racing</Person>
     <Person name="Stephanie" age="26" />
   </div>
  );
 }
}
export default App;

The parameters passed in app.js through the person component will come in props. These props will be objects. And if you have to access the object's key then you use the dot(.) operator like person.age, person.name Likewise, here you will use props.age etc as props is your object.

//Person.js
import React from 'react';
function person(props){
 return (
  <div>
    <p>I'm {props.name} and I am {props.age} years old!</p>
    <p>{props.children}</p>
  </div>
 )
};
export default person;

Attached, is the screenshot from where u can see that props are basically objects. So, you can play with the same as you play with objects.

I hope props are clear from the above content. In case of any confusion, do comment in the comment section or You can find the complete code in my GitHub account here.

soniapahuja75/Props-basic-Example

Thanks for Reading.

Props In react

Happy React Coding……