Post
Ask Question

React Native State And Props

React Native is a JavaScript framework to build mobile applications which are supported by both Android as well as the iOS platform. React Native apps are coded just once and are available for both the platforms, which helps to save the development time.

 
To know more about React Native setup for Android, visit my other article from the below link.
In this article, we are going to learn what state and props are and how to use these. There are two types of data in React Native which control component -
  1. State
  2. Props

State

 
State is internal to a component in React Native that is used to keep track of the information.
  • State is mutable
  • Used within the component (limited to current component)
  • Initialize within constructor
  • Used “this.setState” to update object.
  • Can get initialize from parent component but cannot be changed from a parent component
  • Can set initialize the value for child component and cannot be changed in the child component
  • Can set default values inside component and can be changed inside component.
  • Examples: - User interaction within component like filling forms, checkboxes, buttons click
Syntax
 
state = {myState: 'value'}
 

Props

 
Props is the short form for properties and can be referred to something that can be changed dynamically in a component. Here, the component receives props from the parent component.
  • Props are Immutable
  • Used to passed data from parent to child.
  • Used to pass data as well as callback functions as props.
  • Can get initialize from parent component and can be changed from a parent component
  • Can set initialize the value for child component and can be changed in the child component
  • Can set default values inside component and can be changed inside component
  • Examples :- Used child component in the parent component.
Syntax
 
props.myState
 
Example
 
Before starting the coding part, we are removing the extra line of code from the App.js file and making it simple so that we easily target React Native state and props.
 
Note
In this example, I am using Windows 10 and targeting Android application, not iOS application. So, if you are using this code for iOS, the output for iOS might be different in look.
 
Change App.js file code like below and refresh the screen.
  1. import React, { Component } from "react";  
  2. import { View, Text } from "react-native";  
  3.   
  4. class App extends Component {  
  5.   render() {  
  6.     return (  
  7.       <View>  
  8.         <Text style={{ fontSize: 40, color: "blue" }}>Hi React Native</Text>  
  9.       </View>  
  10.     );  
  11.   }  
  12. }  
  13.   
  14. export default App;  
O/P
 
the output should be like below.
 
React Native State And Props
 
Note
Press “control + m” button on the keyboard and select the "Reload" option to refresh the screen or to check output after changes in the code.
 
React Native State And Props
 
Example for State
 
In the below example, I have added myName variable and assigned value as 'Hi React Native Android' and printed that value using React Native state using syntax {this.state.myName}
  1. import React, { Component } from "react";  
  2. import { View, Text} from "react-native";  
  3.   
  4. class App extends Component {  
  5.   constructor() {  
  6.     super()  
  7.     this.state = {  
  8.       myName: 'Hi React Native Android'  
  9.     }  
  10.   }  
  11.   render() {  
  12.     return (  
  13.       <View>  
  14.         <Text style={{ fontSize: 40, color: "blue" }}>{this.state.myName}</Text>  
  15.       </View>  
  16.     );  
  17.   }  
  18. }  
  19.   
  20. export default App;  
O/P
 
The output should be like below.
 
React Native State And Props
 
To change state value
 
I have added a “Button” from React Native to change the value of state. By using the user-defined handleChange function, I have updated/changed state variable value.
 
Button
  • This is a basic component in React Native that should render nicely on any platform.
  • onPress - handler to be called when user tap the button
  • title - Text to display inside the button
  • color - for Android its background color and in iOS color of the text.
  1. import React, { Component } from "react";  
  2. import { View, Text, Button } from "react-native";  
  3.   
  4. class App extends Component {  
  5.   constructor() {  
  6.     super()  
  7.     this.state = {  
  8.       myName: 'Hi React Native Android'  
  9.     }  
  10.   }  
  11.   
  12.   handleChange = () => {  
  13.     this.setState({ myName: 'Welcome To React Native Android Application' })  
  14.   }  
  15.   render() {  
  16.     return (  
  17.       <View>  
  18.         <Text style={{ fontSize: 40, color: "blue" }}>{this.state.myName}</Text>  
  19.         <View style={[{ width: "70%", margin: 50, backgroundColor: "red" }]}>  
  20.           <Button  
  21.             onPress={this.handleChange}  
  22.             title="Set State"  
  23.             color="#FF3D00"  
  24.           />  
  25.         </View>  
  26.       </View>  
  27.   
  28.     );  
  29.   }  
  30. }  
  31. export default App;  
O/P
 
The output should be like below before the button is clicked.
 
React Native State And Props
 
O/P
 
The output should be like below after button-click.
 
React Native State And Props
 
Example for Props
 
In the below example, I have created a new JavaScript file with the name child.js and added a component as ChildComponent.
 
Main component code - (App.js)
 
Import ChildComponent from child.js and pass myPropValue as props and handleChange function as props into it where handleChange function helps to change value of state in parent component which get call from child component.
  1. import React, { Component } from "react";  
  2. import { View, Text } from "react-native";  
  3. import ChildComponent from "./child";  
  4.   
  5. class App extends Component {  
  6.   constructor() {  
  7.     super()  
  8.     this.state = {  
  9.       myName: 'Hi React Native Android'  
  10.     }  
  11.   }  
  12.   
  13.   handleChange = () => {  
  14.     this.setState({ myName: 'Value updated by React Native Props' })  
  15.   }  
  16.   
  17.   render() {  
  18.     return (  
  19.       <View>  
  20.         <ChildComponent myPropValue={this.state.myName} handleChange={this.handleChange} />  
  21.       </View>  
  22.   
  23.     );  
  24.   }  
  25. }  
  26.   
  27. export default App;  
child.js code
 
This component will receive props from the parent component. Look below for learning how to use it.
 
onPress
 
Using this.props, we call the handleChange event from the child component to change the value of state in the parent component.
  1. import { View, Text } from "react-native";  
  2.   
  3. class ChildComponent extends Component {  
  4.     render() {  
  5.         return (  
  6.             <View>  
  7.                 <Text style={{ fontSize: 40, color: "blue" }}  
  8.                     onPress={this.props.handleChange}  
  9.                 > {this.props.myPropValue}</Text>  
  10.             </View>  
  11.   
  12.         );  
  13.     }  
  14. }  
  15.   
  16. export default ChildComponent;  
O/P
 
The output should be like below before clicking on the text.
 
React Native State And Props
 
O/P
 
The output should be changed like below after clicking on the text.
 
React Native State And Props
 

Conclusion

 
In this article, I have explained what state and props are and how to use them in React Native while developing Android apps. Hopefully, it will help you.


Similar Articles