Post
Ask Question

State And Props In React Native Application

If you are new to React Native, I will recommend you to read the previous article of this series. 
In React (or React Native), there are two types of data that can control a component - State and Props.
 

State

 
State can be referred to as the local state of the component. The state of a component cannot be accessed and modified outside of the component. State is mutable, which means that the state of a component can be changed in response to some action. The state of one component can behave as Props for the other component as well. We cannot update the state directly. So, in order to update the state of the component, we have to use the setState method. setState re-renders the parent component as well as the child component class.
 
Let’s see how we can use State in a React Native application.
 
App.js Code
  1. import React from 'react';  
  2. import { StyleSheet, Text, View } from 'react-native';  
  3.   
  4. export default class App extends React.Component {  
  5.   state={  
  6.     Counter:1  
  7.   }  
  8.   updateState=()=>  
  9.     this.setState({Counter:this.state.Counter+1})  
  10.   render() {  
  11.     return (  
  12.       <View style={styles.container}>  
  13.         <Text style={{fontSize:40}}>State Example</Text>  
  14.         <Text style={{fontSize:40}} onPress={this.updateState}>  
  15.         {this.state.Counter}  
  16.         </Text>  
  17.       </View>  
  18.     );  
  19.   }  
  20. }  
  21.   
  22. const styles = StyleSheet.create({  
  23.   container: {  
  24.     flex: 1,  
  25.     backgroundColor: '#fff',  
  26.     alignItems: 'center',  
  27.     justifyContent: 'center',  
  28.   },  
  29. });  
In the above example, we have created a State object and added a Counter property with initial value as 1. We have declared an updateState function in order to update the state using the setState method. On calling setState, it will re-render the component. On the text component, we are using an onPress Touch event with which we can use the updateState function and increase the counter value with 1. Now, let’s run the application with the npm start command.
 
Preview
 
State And Props In React Native Application
 

Props

 
Props stands for the properties and is used to pass the data as well as an event handler to the child components (passing data from the view to the controller or from parent to the child). It is immutable, that means we cannot change its value. Interestingly, it has faster performance than State. Let’s make some changes in the previous example in order to check its functionality. In order to demonstrate, we need two classes, one will behave as a parent and the other one will behave as a child. 
  1. import React from 'react';  
  2. import { StyleSheet, Text, View } from 'react-native';  
  3. import Child from './ChildApp';  
  4.   
  5. export default class App extends React.Component {  
  6.   state={  
  7.         Counter:1  
  8.       }  
  9.   
  10.       updateState=()=>this.setState({Counter:this.state.Counter+1})  
  11.   render() {  
  12.     return (  
  13.       <View style={styles.container}>  
  14.         <Child myCounter={this.state.Counter} updateState={this.updateState}></Child>  
  15.       </View>  
  16.     );  
  17.   }  
  18. }  
  19.   
  20. const styles = StyleSheet.create({  
  21.   container: {  
  22.     flex: 1,  
  23.     backgroundColor: '#fff',  
  24.     alignItems: 'center',  
  25.     justifyContent: 'center',  
  26.   },  
  27. });  
In the above code, we are importing the Child class (code for the Child class is provided below) and passing the Counter value as myCounter attribute in JSX as well as function as updateState atribute for the updating the State as props.
  1. import React from 'react';  
  2. import { StyleSheet, Text, View } from 'react-native';  
  3.   
  4. export default class Child extends React.Component {  
  5.   render() {  
  6.     return (  
  7.       <View style={styles.container}>  
  8.         <Text style={{fontSize:40}}>Props Example</Text>  
  9.         <Text style={{fontSize:40}} onPress={this.props.updateState}>  
  10.         {this.props.myCounter}  
  11.         </Text>  
  12.       </View>  
  13.     );  
  14.   }  
  15. }  
  16.   
  17. const styles = StyleSheet.create({  
  18.   container: {  
  19.     flex: 1,  
  20.     backgroundColor: '#fff',  
  21.     alignItems: 'center',  
  22.     justifyContent: 'center',  
  23.   },  
  24. });  
As we know, our Child class is receiving multiple props, so can use this.props.<Name_Of_Property> in order to access its value. 
 
Preview
 
State And Props In React Native Application 
 
Hope this will help you.
 
Thanks. 


Similar Articles