If you need to pass dynamic data through HTML attributes to the component, then you will have to use react props. So, you will learn to use it both functional & class component with some examples. Even you will learn to pass values from a component and access them in other components using props.
What’s before –
Before getting started, you must learn the following topics. if you have already known , then you can skip these topics –
Props in React js
React props are arguments passed to the component in the form of HTML attributes.
props is actually an object that may contain single or multiple arguments and It can be accesed in the JSX within curly brackets {}
Even Props is mainly passed to the Function Component and Class Component.
Props is the short form of properties that is defined by react community. So, It never be changed.
Syntax –
Here is syntax to pass props
<ComponentName attributeName_1 ="value_1" attributeName_2 ="value_2" attributeName_n ="value_n" />
Where, attributeName_1 =”value_1″ attributeName_2 =”value_2″ attributeName_n =”value_n” are props
props holds the passed HTML attributes like the following object form.
props = {
attributeName_1: "value_1",
attributeName_2: value_2,
attributeName_n: value_n
}
Here is syntax to access props in function component
{ props.attributeName_1 }
{ props.attributeName_2 }
{ props.attributeName_n }
Here is syntax to access props in class component
{ this.props.attributeName_1 }
{ this.props.attributeName_2 }
{ this.props.attributeName_n }
Example –
Suppose that We pass name=”Sunil Kumar” & age = “24” to the Boy components
<Boy name="Sunil Kumar" age ="24" />
If Boy is a function component then you will have to pass props
function Boy(props){
return <p>Age of {props.name} is {props.age}</p>
}
If Boy is a class component then you need not to pass props
class Boy extends React.Component {
render(){
return <p>Age of {this.props.name} is {this.props.age}
}
}
Pass props to Function Component
If you need to pass data to the function component, then you should do it by using the props.
props will contain the passed data in the form of object. so, you can easily access them in the function component.
Important Point –
- Function component accepts only one argument name
- The argument name of the function component must be props.
- Props must be passed to function component element in the form of html attributes
- Also, values of props must be accessed by using props.attributeName
Synax –
Syntax for passing props to the function component element –
<ComponentName attributeName_1="value_1" attributeName_2="value_2 attributeName_n="value_n" />
Syntax for accessing props in the function component
function ComponentName(props){
// access props in jsx
{props.attributeName_1}
{props.attributeName_2}
{props attributeName_n}
}
Pass props to function component with a single data
If you need to pass props to function component with a single data, then you have to follow these examples.
We have to create a Welcome component to render a message “Welcome to CodingStatus” Where “Welcome to ” should be declared within the JSX and “CodingStatus” should be passed as props to the <Welcome /> element.
Example – 1
You can pass props with that data to the function component by assigning to a attribute property like name=”CodingStatus”
<Welcome name ="CodingStatus" />
Example – 2
You can pass props with that data by assigning to a variable. But you will have to pass this variable to the property with a curly brackets
Implement this concept in previous example – 1
const companyName = "CodingStatus"
<Welcome name = {companyName} />
Pass props to function component with multiple data
You can pass props with two or more data to the function component. But you will have to seperate them with a single white space.
If you need to pass props with multiple data, then you have to follow these examples
Suppose that, we need to create a Student component and pass three data name , age& city. these data can be anything. you can pass acoording to you. But I will show you examples with name is “Noor Khan”, age is “25” & city is “patna” .
function Student(props){
return <p>My Name is {props.name} from {props.age} and I am {props.city} years old.</p>
}
Example – 1
You can pass props with those data to the function compoent by assigning them to the attribute properties like name = “Noor Khan” age=”25″ & city=”Patna
<Student name="Noor Khan" age="25" city="Patna" />
Example – 2
You can also pass those data to the function component by assigning them to variables like const studentName = “Noor Khan” const studentAge= 25 & const studentCity=”Patna. then, you will have to pass those variables to attribute property with curly brackets
<Student name={studentName} age={studentAge} city={studentCity} />
Example – 3
You can also pass props with custom object to the function component like
data = {
name:"Noor Khan",
age:25,
city:"Patna"}
then, you will have to pass those variables to a single attribute property with curly brackets
data = {
name:"Noor Khan",
age:25,
city:"Patna"}
<Student student={data} />
function Student(props){
return <p>My Name is {props.student.name} from {props.student.age} and I am {props.student.city} years old.</p>
}
Pass props to Class Component
If you need to pass data to the class component, then you should do it by using the props.
props will contain the passed data in the form of object. so, you can easily access them in the class component.
Important Point –
- Props must be passed to class component element in the form of HTML attributes
- Also, values of props must be accessed by using this.props.attributeName in the class component
Synax –
Syntax for passing props to class component element
<ComponentName property_1="value_1" property_2="value_2 propert_n="value_n" />
Stynax for accessing props in the class component
class ComponentName extends React.Component{
function render(){
// access props in jsx
{this.props.property_1}
{this.props.property_2}
{this.props property_n}
}
}
Pass props to class component with a single data
If you need to pass props with a single data, then you have to follow these examples.
Suppose that We have to create a Course component to render a message “Learn React Js from basic” Where “Learn from basic ” should be declared within the JSX and “React Js” should be passed as props to the <Course /> element.
Example – 1
You can pass props with that data to the class component by assigning to a attribute property like name=”React Js”
<Course name ="React Js" />
Example – 2
You can pass props with that data by assigning to a variable. But you will have to pass this variable to the property with a curly brackets
Implement this concept in previous example – 1
const courseName = "React Js"
<Course name = {courseName} />
Pass props to class component with multiple data
You can pass props with two or more data to the class component. But you will have to seperate them with a single white space.
If you need to pass props with multiple data, then you have to follow these examples
Suppose that, we need to create a Student component and pass three data-name, age& city. these data can be anything. you can pass according to you. But I will show you examples with the name is “Noor Khan”, age is “25” & city is “Patna” .
class Student extends React.Component{
function render(){
return <p>My Name is {this.props.name} from {this.props.age} and I am {this.props.city} years old.</p>
}
}
Example – 1
You can pass props with those data to the function compoent by assigning them to the attribute properties like name = “Noor Khan” age=”25″ & city=”Patna
<Student name="Noor Khan" age="25" city="Patna" />
Example – 2
You can also pass those data to the function component by assigning them to variables like const studentName = “Noor Khan” const studentAge= 25 & const studentCity=”Patna. then, you will have to pass those variables to attribute property with curly brackets
<Student name={studentName} age={studentAge} city={studentCity} />
Example – 3
You can also pass props with custom object to the function component like
data = {
name:"Noor Khan",
age:25,
city:"Patna"}
then, you will have to pass those variables to a single attribute property with curly brackets
data = {
name:"Noor Khan",
age:25,
city:"Patna"}
<Student student={data} />
Access those data in the class component like this
class Student extends React.Component{
function render(){
return <p>My Name is {this.props.student.name} from {this.props.student.age} and I am {this.props.student.city} years old.</p>
}
}
What’s Next –
Now, You should Learn React State. I will share it in upcoming articles, If you like this tutorial, then do comment & share with your friends too. Also, you have any suggestion for this article, you suggest me through the below comment box.