In this video we are going to learn about props.
React is a component-based library which divides the UI into little reusable pieces.
In some cases, those components need to communicate and the way to pass data between components is by using props.
\"Props\" is a special keyword in React, which stands for properties and is being used for passing data from one component to another.
So Let see how to use props in components.
Switch to the project and just open Post Component and student component.
Here Student Component is Child component and Post is a Parent component.
Now lets pass some properties from parent component to child component.
So go to the Post component and here.


<Student name=\"Smith John\" email=smith@gmail.com phone=\"1234567890\" />


Now access these properties to the Student component.
So go to the Student component and here.


import React, { Component } from 'react'

class Student extends Component {
render() {
return (
<div>
<h3>Student Details</h3>
<p>Name: {this.props.name} </p>
<p>Email: {this.props.email} </p>
<p>Phone: {this.props.phone}</p>
</div>
)
}
}

export default Student;


Now lets check so switch to browser and you can see the student component.
There is a different way to use props.
So let see switch to the project inside the Student Component just write.


import React, { Component } from 'react'

class Student extends Component {
render() {
const {name,email,phone} = this.props;
return (
<div>
<h3>Student Details</h3>
<p>Name: {name} </p>
<p>Email: {email} </p>
<p>Phone: {phone}</p>
</div>
)
}
}

export default Student;


Now save the file lets see the result.
So switch to the browser and you can see the student components and properties.
Now lets use Student component with different properties.
Now go to the post component and here add.


<Student name=\"Peter\" email=peter@gmail.com phone=\"1209876543\" />


Now save the file and switch to the browser.
You can see the Student Components with different properties.
So in this way you can use props in components.