ReactJS Props

Props are short for properties and they are used to pass information between React components. React’s data flow between components is uni-directional (from parent to child only). Props are passed to components via HTML attributes. ReactJS Props are like function arguments in JavaScript and attributes in HTML. It gives also a way to pass data from one component to other components.

In other Word, The data can be passed from one component to another component using these reactjs props, similar to how the arguments are passed in a function. Inside the component, we can add the attributes called props; however, we cannot change or modify props inside the component as they are immutable.

Passing and Accessing props using Class Component

We can pass props to any component as we declare attributes for any HTML tag. Have a look at the below code snippet:

 <Employee Employeename = "Rohatash" />

In the above code snippet, we are passing a prop named Employeename to the component named Employee. This prop has the value Rohatash Let us now see how can we access these props.

We can access any props inside from the component’s class to which the props is passed. The props can be accessed as shown below :

this.props.Employeename

We can access any prop from inside a component class using as the above syntax. The this.props is a object which stores all of a components props(properties). The Employeename that is the names of props are keys of this object. Below is a sample program to illustrate how to pass and access props from a component:

Now open your react project and edit the App.js file in the src folder.

import React from 'react';
import ReactDOM from 'react-dom';

class Employee extends React.Component{
render(){
return(

<div>
{/*accessing information from props */}
<h2>Hi {this.props.Employeename}</h2> 
</div>
);
} 
}
ReactDOM.render(

<Employee Employeename = "Rohatash" />, document.getElementById("root") // passing properties
);

export default Employee;

Output

Passing and Accessing props using Function Component

Functional components accept props as parameters and can be accessed directly. Below is the same example as above but this time using a function-based component instead of a class-based component.

Now open your react project and edit the App.jsfile in the src folder.

App.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

// functional component to illustrate props
function Employee(props){
return(
<div> 
<h2>Hi {props.Employeename}</h2>

</div>
);
}

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
<StrictMode>
<Employee Employeename = "Rohatash" />
</StrictMode>
);
export default Employee;

Output will be the same as above code.

Passing Data from One Component to Another

We will pass some data as props from our Parent component to the Child component. We can pass as many props as we want to a component.

Now Open your react project and edit the App.js file in the src folder:

App.js:

import React from 'react';
import ReactDOM from 'react-dom';

// ParentCom Component
class ParentCom extends React.Component{
render(){
return(
<div>
<h2>Parent Component</h2>
<ChildCom name="Rohatash" Education = "MCA"/>
</div>
);
}
}

// ChildCom Component
class ChildCom extends React.Component{
render(){
console.log(this.props);
return(
<div>
<h2>Hi, {this.props.name}</h2>
<h3>Child Component</h3>
<h3>Your Education: {this.props.Education}</h3>
</div>
);
}
}

ReactDOM.render(
// passing props
<ParentCom />,
document.getElementById("root")
);

export default ParentCom; 

Output