The UI of every React-driven application that we develop can be segregated into many components. Every React JS application that we develop is made up of a number of different components.
Every React-driven application must have at least one root component and this component can have one or more child components within it. And this nesting can be extended a bit further during the development procedure of an application UI.
To keep that in perspective, let’s take a real-life code example. In this code snippet, we want to develop one StudentDetails Component in which we’ll define different details like Student Personal Info, Student Marks Details, Student’s Location, and Student’s father’s occupation.
In order to design an application UI, we need to create two components:
- StudentDetails Component
- StudentMarks Component
We’ll use StudentMarks component inside the StudentDetails Component. In this code example, Student Details will be the parent component and the StudentMarks will be child component. Besides, the child component must be defined inside the parent component.
To make this UI work properly, the exchange of data must take place between these two components. Generally, an exchange of data takes place from the parent component to a child component, from child to parent or between siblings.
In this tutorial, we’ll walk you through how to specify children components and how an exchange of data takes place from parent to child or from child to a parent component.
In order to create UI to demonstrate these fundamental concepts, let’s first open index.js and create the StudentDetails component that will demonstrate all the details pertain to a specific student.
Without any further ado, let’s jump over to the code editor and start coding:
classStudentDetails extends React.Component{
constructor(props){
super(props);
}
render(){
return<div>
<h1>StudentDetails Component……..</h1>
<p>
<label>Id : <b>{this.props.Id}</b></label>
</p>
<p>
<label>Name : <b>{this.props.Name}</b></label>
</p>
<p>
<label>Father’s Occupation : <b>{this.props.Location}</b></label>
</p>
<p>
<label>Gender : <b>{this.props.Gender}</b></label>
</p>
<p>
<label>Roll Number : <b>{this.props.Rollno}</b></label>
</p>
</div>
}
}
Now we want to display details of marks obtained by a student via StudentMarks component.
Let’s move further and create another component StudentMarks that will display how much students scores in different subjects like Mathematics, Physics, Chemistry, Programming, Statistics, Humanities, and Economics.
Let’s jump right into the code:
classStudentMarks extends React.Component{
constructor(props){
super(props);
}
render(){
return<div>
<h1>Student Marks Detail Components…….</h1>
<p>
<label>Mathematics : <b>{this.props.mathematics}</b></label>
</p>
<p>
<label>Physics : <b>{this.props.Physics}</b></label>
</p>
<p>
<label>Chemistry : <b>{this.props.Chemistry}</b></label>
</p>
</div>
}
}
Now let’s call this StudentMarks component from the StudentDetails component:
<Studentmarks Physics={this.props.Physics} Mathematics={this.props.Mathematics} Chemistry={this.props.Chemistry}Programming={this.props.Programming} Statistics={this.props.Statistics} Economics={this.props.Economics} Humanities={this.props.humanities}></StudentMarks>
In this example, the StudentDetails component is the parent component and StudentMarks components is the child component and we are passing the data from the parent component to a child component. Now let’s call our StudentDetails component and render it.
const e = (
<StudentDetails
Id="101"
Name="Waleed"
FatherOccupation="servant"
Gender="Male"
Rollno="671"
Physics="98"
Chemistry="96"
></StudentDetails>
);
ReactDOM.render(e, document.getElementById("root"));
Save this code and navigate to the browser to see how output would look like:
Index.js
import React from "react";
import ReactDOM from "react-dom";
class StudentDetails extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>StudentDetails Component……..</h1>
<p>
<label>
Id : <b>{this.props.Id}</b>
</label>
</p>
<p>
<label>
Name : <b>{this.props.Name}</b>
</label>
</p>
<p>
<label>
FatherOccupation : <b>{this.props.FatherOccupation}</b>
</label>
</p>
<p>
<label>
Gender : <b>{this.props.Gender}</b>
</label>
</p>
<p>
<label>
Roll Number : <b>{this.props.Rollno}</b>
</label>
</p>
<StudentMarks
Mathematics={this.props.Mathematics}
Physics={this.props.Physics}
Chemistry={this.props.Chemistry}
></StudentMarks>
</div>
);
}
}
class StudentMarks extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Student Marks Detail Components…….</h1>
<p>
<label>
Physics : <b>{this.props.Physics}</b>
</label>
</p>
<p>
<label>
Chemistry : <b>{this.props.Chemistry}</b>
</label>
</p>
</div>
);
}
}
const e = (
<StudentDetails
Id="101"
Name="Waleed"
FatherOccupation="servant"
Gender="Male"
Rollno="671"
Physics="98"
Chemistry="96"
></StudentDetails>
);
ReactDOM.render(e, document.getElementById("root"));
Output:
