Introduction
React is an Open Source JavaScript library. It is used for developing scalable, simple, and fast front-ends for web & mobile applications. It handles the view layer of mobile and web applications. React is flexible and can be used in any application.
Description
In this article, we learn about the steps of how the react application will be comprised of multiple components. There will be one Root Component and this component can have one or more Child Components in it. Steps to pass the data from Parent to Child and child to parent components.
Please visit the React articles to understand the beginning.
Understand with example below
We will understand how we pass the data from parent to Child and Child to Parent.
Let's take a look at one example. We want to Develop one Employee Component, in which we will have sections like Employee Personal Info, Project Details, Salary Details Section, and Department section. So the Application UI can be designed in such a way that we will create components like,
- Personal Component
- Project Component
- Salary Component
- Department Component
In Employee Component I will use the above Components. EmployeeComponent becomes the Parent Component, and the rest can be used as Child Components inside EmployeeComponent. It is a very common requirement between these components to share the data. Either from parent to Child, Child to parent, or between the Siblings.
I will start with the first one, from Parent to Child
There are various ways of making this communication happen from Parent to Child. The simplest and straightforward way of doing this is through properties. Lets Open Index.js file, Create Employee Component which will display Employee Details. To save time, I have kept the Code ready by copying it from our last sessions and pasting it here.
Code Ref
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class Employee extends React.Component{
constructor(props){
super(props);
}
render(){
return <div>
<h1>Employee Component Part 1</h1>
<p>
<label>Employee Id : <b>{this.props.Id}</b></label>
</p>
<p>
<label>Employee Name : <b>{this.props.Name}</b></label>
</p>
<p>
<label>Employee Location : <b>{this.props.Location}</b></label>
</p>
<p>
<label>Employee Total Salary : <b>{this.props.Salary}</b></label>
</p>
</div>
}
}
Now we want to display the Salary Breakup details. Let's go ahead and Create a Salary Component that will display Employee Salary Information like basic Salary, HRA and Special Allowance. I have kept the Code ready and pasted it here.
Code Ref
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class Employee extends React.Component{
constructor(props){
super(props);
}
render(){
return <div>
<h1>Employee Component Part 1</h1>
<p>
<label>Employee Id : <b>{this.props.Id}</b></label>
</p>
<p>
<label>Employee Name : <b>{this.props.Name}</b></label>
</p>
<p>
<label>Employee Location : <b>{this.props.Location}</b></label>
</p>
<p>
<label>Employee Total Salary : <b>{this.props.Salary}</b></label>
</p>
</div>
}
}
class Salary extends React.Component{
constructor(props){
super(props);
}
render(){
return <div>
<h1>Employee Salary Details...</h1>
<p>
<label>Employee Basic Salary : <b>{this.props.BasicSalary}</b></label>
</p>
<p>
<label>Employee HRA : <b>{this.props.HRA}</b></label>
</p>
<p>
<label>Employee Special Allowance : <b>{this.props.SpecialAllowance}</b></label>
</p>
</div>
}
}
Let's Call this Salary Component from Employee Component.
Code Ref
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class Employee extends React.Component{
constructor(props){
super(props);
}
render(){
return <div>
<h1>Employee Component Details</h1>
<table>
<tr>
<th>Employee Id</th>
<th>Employee Name</th>
<th>Employee Location</th>
<th>Employee Total Salary</th>
</tr>
<tr>
<td>{this.props.Id}</td>
<td>{this.props.Name}</td>
<td>{this.props.Location}</td>
<td>{this.props.Salary}</td>
</tr>
</table>
<Salary BasicSalary={this.props.BasicSalary} HRA={this.props.HRA} SpecialAllowance={this.props.SpecialAllowance}></Salary>
</div>
}
}
class Salary extends React.Component{
constructor(props){
super(props);
}
render(){
return <div>
<h1>Employee Salary Details</h1>
<table>
<tr>
<th>Employee Basic Salary</th>
<th>Employee HRA</th>
<th>Employee Special Allowance</th>
</tr>
<tr>
<td>{this.props.BasicSalary}</td>
<td>{this.props.HRA}</td>
<td>{this.props.SpecialAllowance}</td>
</tr>
</table>
</div>
}
}
const e=<Employee Id="1" Name="Satyaprakash Samantaray" Location="Bangalore" Salary="25000" BasicSalary="12000" HRA="7000" SpecialAllowance="9000"></Employee>
ReactDOM.render(e,document.getElementById("root"));
The below line is added,
<Salary BasicSalary={this.props.BasicSalary} HRA={this.props.HRA} SpecialAllowance={this.props.SpecialAllowance}></Salary>
Now Employee is the Parent and Salary Component is the Child. Parent Component is passing the Data to Child Components through properties. Let's Call the Employee Component, and let's render it.
const e=<Employee Id="1" Name="Satyaprakash Samantaray" Location="Bangalore" Salary="25000" BasicSalary="12000" HRA="7000" SpecialAllowance="9000"></Employee>
ReactDOM.render(e,document.getElementById("root"));
Let's save these changes. Go to the browser and we can see the Output. We are passing the data from the Employee Component to the Salary Component.
Output
![Employee component details]()
Now, we want to allow people to change the salary details, whether it be Basic or HRA or Special Allowance, resulting in an Updated Total Salary in the Employee Component should be displayed. That means we have to Pass the data from Child to Parent. To allow users to change the salary details, let's create a state object in the constructor, add respective properties, and initialize them with the data from our props.
Code Ref
The below code will be added before the salary component.
constructor(props){
super(props);
this.state={
basic:this.props.BasicSalary,
hra:this.props.HRA,
sa:this.props.SpecialAllowance
};
Lets display the salary details in textboxes by placing input elements and assign the defaultValue by reading from State Object.
Code Ref
render(){
return <div>
<h1>Salary Details...</h1>
<p>
<label>Basic Salary :<input type="text" defaultValue={this.state.basic} ref="BasicSalary"/></label>
</p>
<p>
<label>HRA : <input type="text" defaultValue={this.state.hra} ref="HRA"/></label>
</p>
<p>
<label>Special Allowance : <input type="text" defaultValue={this.state.sa} ref="SpecialAllowance"/></label>
</p>
Place a Button with the text Update and Call a function Called UpdateSalary on the Click.
<button onClick={this.updateSalary}>Update</button>
Implement updateSalary function. In this function, we have to calculate TotalSalary based on Basic Salary, HRA, and Special Allowance. To access the input values in this function, we can either handle the onChange event on every input element and change the state object data accordingly, as discussed in our previous session, or associate a reference to each input field. In this example, we add a reference to each input field using ref. So I go and add ref=”basicSalary” ref=”HRA” ref=”SpecialAllowance” to our input fields. Now let's do the total Salary Calculation in our UpdateSalary function by using refs.referenceName.value.
updateSalary=()=>{
let salary=parseInt(this.refs.BasicSalary.value)+parseInt(this.refs.HRA.value)+ parseInt(this.refs.SpecialAllowance.value);
this.props.onSalaryChanged(salary);
}
This salary should be pushed from Child to Parent, and we can do that by using Callbacks. So after the Salary is Calculated, I push this salary into a new Property called onSalaryChanged and use this property as a Callback.
this.props.onSalaryChanged(salary);
Now, let's go to the place where this Salary Component is being Called from, add a New Property Called onSalaryChanged, and assign a function name assuming getUpdatedSalary from EmployeeComponent, which should be Called.
<Salary BasicSalary={this.props.BasicSalary} HRA={this.props.HRA} SpecialAllowance={this.props.SpecialAllowance} onSalaryChanged={this. getUpdatedSalary }></Salary>
Let's implement the getUpdatedSalary function in EmployeeComponent. getUpdatedSalary function will receive the salary from the Salary Component, and we can store this in the state object using the setState method. The code below will be implemented before the employee component render method.
Code Ref
getUpdatedSalary = (salary) => {
this.setState({updatedSalary:salary});
}
and this can be displayed in our Employee Component.
Code Ref
<p>
<label>Updated Total Salary : <b>{this.state.updatedSalary}</b></label>
</p>
Complete Code Ref
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class Employee extends React.Component{
constructor(props){
super(props);
this.state = {
updatedSalary:null
};
}
getUpdatedSalary = (salary) => {
this.setState({updatedSalary:salary});
}
render(){
return <div>
<h1>Employee Component Details</h1>
<table>
<tr>
<th>Employee Id</th>
<th>Employee Name</th>
<th>Employee Location</th>
<th>Employee Total Salary</th>
<th>Updated Total Salary</th>
</tr>
<tr>
<td>{this.props.Id}</td>
<td>{this.props.Name}</td>
<td>{this.props.Location}</td>
<td>{this.props.Salary}</td>
<td>{this.state.updatedSalary}</td>
</tr>
</table>
<Salary BasicSalary={this.props.BasicSalary} HRA={this.props.HRA} SpecialAllowance={this.props.SpecialAllowance} onSalaryChanged={this. getUpdatedSalary }></Salary>
</div>
}
}
class Salary extends React.Component{
constructor(props){
super(props);
this.state={
basic:this.props.BasicSalary,
hra:this.props.HRA,
sa:this.props.SpecialAllowance
};
}
updateSalary=()=>{
let salary=parseInt(this.refs.BasicSalary.value)+parseInt(this.refs.HRA.value)+ parseInt(this.refs.SpecialAllowance.value);
this.props.onSalaryChanged(salary);
}
render(){
return <div>
<h1>Employee Salary Details</h1>
<table>
<tr>
<th>Employee Basic Salary</th>
<th>Employee HRA</th>
<th>Employee Special Allowance</th>
</tr>
<tr>
<td><input type="text" defaultValue={this.state.basic} ref="BasicSalary"/></td>
<td><input type="text" defaultValue={this.state.hra} ref="HRA"/></td>
<td><input type="text" defaultValue={this.state.sa} ref="SpecialAllowance"/></td>
</tr>
</table>
<br/>
<button onClick={this.updateSalary}>Update Salary</button>
</div>
}
}
const e=<Employee Id="1" Name="Satyaprakash Samantaray" Location="Bangalore" Salary="25000" BasicSalary="12000" HRA="7000" SpecialAllowance="9000"></Employee>
ReactDOM.render(e,document.getElementById("root"));
Let's save these Changes, go back to the browser, and make some changes to the salary details. Now, on Clicking on Update, we can see that Updated Salary is displayed. The total salary will be updated based on the Employee's Basic Salary, Employee HRA, and Employee Special Allowance.
Updated Total Salary = Employee Basic Salary + Employee HRA + Employee Special Allowance
Output
![Employee salary details]()
Let's check how to pass the data from Parent to Child and child to parent components.
![Pass the data]()
Write React Code using Online Editor
You can play with the React application Mobile platform using the below steps. Let's open the URL below and start coding.
Then open the below URL to add CDN links so that React can understand the syntax. Select JavaScript Preprocessor: babel.
The steps are already discussed in Part 4: Working on Function Components in React
Summary
In this write-up, we have learned the details below.
- Know about Components Interaction in React
- Update Salary component will be reflected in the Employee Component
- Take an example to calculate TotalSalary based on Basic Salary, HRA, and Special Allowance
- Pass the data from Parent to Child and child to parent components
Thank You & Stay Tuned For More!