React Native State - Geekscoders

React Native

About Lesson

In this React Native lesson we are going to learn about React Native State, we have already learned that how you can use props, now state is like a component’s personal data storage. State is useful for handling data that changes over time or that comes from user interaction, you can create state within the component and that component owns the state, before this it was not possible to use state inside functional component, but now by using React Hooks we can use state inside a functional component.

This is my new Name.js component, in this component i have created a state at the top, after that i have created a button, i want when i click on the button, the state should be changed, so for that we can use setState({}).

import React, {Component} from 'react';
import {Text, View, Button} from 'react-native';

class Name extends Component {
    
    state = {
        name:"Parwiz"
    }

    render() {
        return(
            <View>
                <Text style = {{fontSize:25, padding:20}}>
                    {this.state.name}
                    </Text>
              
              <Button title = "Click Me"
              onPress = {() =>  
                this.setState({name:"Text Changed"})}
              />
                
            </View>
            
        )
    }
}

export default Name;

import React, {Component} from 'react';

import {Text, View, Button} from 'react-native';

class Name extends Component {

state = {

name:"Parwiz"

}

render() {

return(

<View>

{this.state.name}

</Text>

<Button title = "Click Me"

onPress = {() =>

this.setState({name:"Text Changed"})}

</View>

)

}

export default Name;

This is my App.js file.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import Name from './components/Name';



export default function App() {
  return (
 
     <View>
     <Name/>
   
     </View>
  
  );
}

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

import Name from './components/Name';

export default function App() {

return (

<View>

<Name/>

</View>

);

}

First run this command.

npm start

npm start

And after that run your application, click on the button you will see that the text is changed.