Core Concepts
- React Native - Running Android
- React Native - Running IOS
- React Native - Router
- React Native - Debugging
- React Native - Animations
- React Native - Buttons
- React Native - HTTP
- React Native - Images
- React Native - ScrollView
- React Native - Text Input
- React Native - ListView
- React Native - Flexbox
- React Native - Styling
- React Native - Props
- React Native - State
- React Native - App
- React Native - Environment Setup
- React Native - Overview
Components and APIs
- React Native - AsyncStorage
- React Native - Geolocation
- React Native - Alert
- React Native - Text
- React Native - Switch
- React Native - Status Bar
- React Native - Picker
- React Native - ActivityIndicator
- React Native - Modal
- React Native - WebView
- React Native - View
React Native Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
React Native - State
The data inside React Components is managed by state and props. In this chapter, we will talk about state.
Difference between State and Props
The state is mutable while props are immutable. This means that state can be updated in the future while props cannot be updated.
Using State
This is our root component. We are just importing Home which will be used in most of the chapters.
App.js
import React from react ; import { StyleSheet, Text, View } from react-native ; export default class App extends React.Component { state = { myState: Lorem ipsum dolor sit amet, consectetur adipisicing ept, used do eiusmod tempor incididunt ut labore et dolore magna apqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut apquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate vept esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt molpt anim id est laborum. } render() { return ( <View> <Text> {this.state.myState} </Text> </View> ); } }
We can see in emulator text from the state as in the following screenshot.
![React Native State](/react_native/images/react_native_state.jpg)
Updating State
Since state is mutable, we can update it by creating the deleteState function and call it using the onPress = {this.deleteText} event.
Home.js
import React, { Component } from react import { Text, View } from react-native class Home extends Component { state = { myState: Lorem ipsum dolor sit amet, consectetur adipisicing ept, sed do eiusmod tempor incididunt ut labore et dolore magna apqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut apquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate vept esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt molpt anim id est laborum. } updateState = () ⇒ this.setState({ myState: The state is updated }) render() { return ( <View> <Text onPress = {this.updateState}> {this.state.myState} </Text> </View> ); } } export default Home;
NOTES − In all chapters, we will use the class syntax for stateful (container) components and function syntax for stateless (presentational) components. We will learn more about components in the next chapter.
We will also learn how to use the arrow function syntax for updateState. You should keep in mind that this syntax uses the lexical scope, and this keyword will be bound to the environment object (Class). This will sometimes lead to unexpected behavior.
The other way to define methods is to use the EC5 functions but in that case we will need to bind this manually in the constructor. Consider the following example to understand this.
class Home extends Component { constructor() { super() this.updateState = this.updateState.bind(this) } updateState() { // } render() { // } }Advertisements