Lesson Description

Lession - #1030 React Native State

The information inside React Components are managed by state and props. In this part, we will discuss the state.

Difference between State and Props

The state is mutable while props are immutable. This implies that the state can be refreshed in the future while props can't be refreshed.
Utilizing State

This is our root part. We are simply bringing in Home which will be utilized in a large portion of the parts.

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 elit, used 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.
   }
   render(>
 {
      return (
      
          {this.state.myState} 
      
      >
;
   }
}

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

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 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 (
         
            
               {this.state.myState}
            
         
      >
;
   }
}
export default Home;