Introduction to React Native Props
The following article provides an outline for React Native Props. There could be many components that may be related to each other. In case they are related, they may also need to share some from one component to another, so the props are the attributes that play the role of sharing attributes between two-component, for example, if we have a component A. It has a state “a” and another Component B, which is a child to the component A then A can pass “a” state to the component B as the props value only thing is only A can modify the value of “a” as it is the actual owner of “a” B can only use it.
Syntax:
Here we are showing syntax by defining two classes of react component ChildProps and the component ParentsProps, where ParentsProps is the parent component, and another one(ChildProps) is the parent component class uses the child component, child component class. We pass a state value with the name “name” to the child component. We can access the value of “name” inside the child component with “this.props.name”. Props in react native are immutable, which means only parent components that are the original owner of props can change it.
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
class ChildProps extends Component {
render() {
return (
<View>
<Text>{this.props.name}</Text>
</View>
);
}
}
export default class ParentsProps extends Component {
render() {
return (
<View>
<ChildProps name='any attribute' />
</View>
);
}
}How do the Native Props React?
We can define the working principle of react-native in the below steps:
Props in react native is an attribute of the child component coming from the parent component.
Component A is the parent component, and Component B is the child component. B will be used by the parent component A and an attribute with the name “a” will be passed from component A to B. Component B will use the attribute “a” with this help, like props. a
The value of “a ” inside component B will not be mutable; here, mutable means component B can not change the value of props “a,” it can use this value.
Examples of React Native Props
Below are the examples of react native props:
Example #1
In the example below, we are using react-native props; here, we are doing the below steps.
First, we have defined two react native classes with the names ParentComponent and ChildComponent, and these components extend the react-native core library. Then, in the next step inside the parent component (ParentComponent), we use multiple child components (ChildComponent) and pass variable users with different values. Each time the child component will get a call from the parent component with the value passed for it.
The child component will get each value for the user and display it along with greetings. The value of props from the parent component to the child component will be decided inside the parent component and immutable inside the child component.
Please see the example below, along with the outputs.
Code:
import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
class ChildComponent extends Component {
render() {
return (
<View style={{ alignItems: "left" }}>
<Text style={propsStyles.greetings}>Welcome Mr/ms </Text>
<Text style={propsStyles.user}>{this.props.user}!</Text>
</View>
);
}
}
export default class ParentComponent extends Component {
render() {
return (
<View style={{ alignItems: "right" }}>
<ChildComponent user="Ranjan" />
<ChildComponent user="Ajay" />
<ChildComponent user="Vijay" />
<ChildComponent user="Suraj" />
<ChildComponent user="Rakesh" />
<ChildComponent user="Ajeet" />
<ChildComponent user="Manjeet" />
</View>
);
}
}
const propsStyles = StyleSheet.create({
greetings: {
fontSize: 28,
fontWeight: "bold",
color: "green"
},
user: {
fontSize: 20,
fontWeight: "bold",
color: "black"
}
});Output:
Example #2
Here in this example, we are performing the below tasks.
First, we have defined two react native classes with the names ParentComponent and ChildComponent, and these components extend the react-native core library. In the next step inside the parent component (ParentComponent), we use multiple child components (ChildComponent) and pass variable name, age, and sex with different values for each child component.
Each time the child component will get a call from the parent component with the value passed for it. In addition, the child component will get each value for the name, age, and sex and display it along with messages.
The value of props from the parent component to the child component will be decided inside the parent component and immutable inside the child component. We can pass many variables from the parent component to the child component; here, the child component plays the representation layer, and the parent can play a role in the data layer, which passes all the data to the child component to display.
Please see the example below, along with the output.
Code:
import React, { Component } from "react";
import { Text, View } from "react-native";
class ChildComponent extends Component {
render() {
return (
<View>
<Text>
Hello mr/ms {this.props.name}! your age is {this.props.age} and your
sex is {this.props.sex}
</Text>
</View>
);
}
}
export default class ParentComponent extends Component {
render() {
return (
<View style={{ justifyContent: "left", alignItems: "left", flex: 1 }}>
<ChildComponent name="ranjan" age="31" sex="male" />
<ChildComponent name="ajay" age="31" sex="male" />
<ChildComponent name="Ankita" age="30" sex="female" />
</View>
);
}
}Output:
Advantages of using React Native Props
There are many advantages of using Props in React Native; some of the important advantages are given below:
- Create a Relation Between Components: Allow developers to create components and create some relationships by sharing variables from one component to another.
- Reusability: If we have defined any variable or designed any value (like price calculation), or if we have fetched once something from the server, we do not need to do it again as we can pass this value to another component, whoever is needed, instead of doing the same calculation again.
- Immutable: Because react-native props are immutable inside the child component, the parent component need not be required to worry about the data passed to the child component.
Conclusion
Here we learned that Props is the attribute of react-native, which allows us to pass some data from a parent component to a child component, or simply it allows us to send data from one component to another.
Recommended Articles
This is a guide to React Native Props. Here we discuss the introduction, how do the native props react, advantages, and examples with outputs. You can also go through our other suggested articles to learn more –
