React Native - State


Advertisements


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.

NOTE − This file won't change during the course of this tutorial, so we will leave it out in the future.

index.ios.js

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import Home from './src/components/home/Home.js'

class reactTutorialApp extends Component {
   render() {
      return (
         <View>
            <Home />
         </View>
      );
   }
}
export default reactTutorialApp

AppRegistry.registerComponent('reactTutorialApp', () ⇒ reactTutorialApp);

Initial state is defined inside the Home class by using the state = {} syntax.

We will bind myText in a view using the {this.state.myText} syntax.

src/components/home/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 elit, 
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad   minim veniam, quis nostrud  exercitation ullamco laboris 
         nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
         reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
         officia deserunt mollit anim id est laborum.'
   }
   render() {
      return (
         <View>
            <Text>
               {this.state.myState}
            </Text>
         </View>
      );
   }
}
export default Home;

We can see in emulator text from the state as in the following screenshot.

React Native State

Updating State

Since state is mutable, we can update it by creating the deleteState function and call it using the onPress = {this.deleteText} event.

src/components/home/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 elit, sed 
         do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
         in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
         deserunt mollit 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.

In our second example, we are using 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
E-Books Store