States in React Native

We can control data of components of react-native by state and props. We are familiar with props and used them multiple times previously.

Props: This is used to customize components and make changes as per our needs. This remains the same for a whole lifetime of the component.  It is defined by parents.

State:  It can be changed. It’s not fixed like props.so if the data is going to be changed in the future, we will use state, and if the data is not going to change, we will use props.

We should make our state as simple as possible. 

The state is initialized inside the constructor, and setState is called whenever we want to change our state.

Example of  State :

import React, { Component, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
export default function App() {
  const[name,usename]= useState('react-native')
  return (
    <View style={styles.container}>
      <Text style={{fontSize: 50 ,fontWeight: 'bold'}}> I hope you will love this {name} tutorial </Text>
   
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor : '#50f9b7',
  },
});

The output of this code : 

Explanation : 

The basic structure of the code must be familiar to you.

Lets look at this part - 

const[name,usename]= useState('react-native')

Here we have initialized the name with ‘react-native ‘, but it is not like we would not be able to change it . we can change it by ‘ usename ‘ . let’s look  how  -

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


export default function App() {
  const[name,usename]= useState('react-native')
  const clickHandler =()=>{
    usename("react-js");
  }
  return (
    <View style={styles.container}>
      <Text style={{fontSize: 50 ,fontWeight: 'bold'}}> I hope you will love this {name} tutorial </Text>
    <Button title='update tutorial name' onPress={clickHandler} />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor : '#50f9b7',
  },
});

Output :

After clicking on the button  -

So lets see what happened here  -

Here additionally I have added-

const clickHandler =()=>{
    usename("react-js");
  }

And

onPress={clickHandler}

So you must know about this ‘onPress’ because we have already studied about it during buttons.

So it means whenever we click on the button – clickhandler will be called.

Within this ‘clickHandler’  we have used ‘usename’ and you must have seen that while declaring the name, we have also used usename there. So this ‘usename’ generally updates the name value . It’s not like we have to use only ‘ usename ‘ for updating. it depends upon you that what naming  convention you have used; you would understand this more clearly through practical example; let’s see

App.js code :

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


export default function App() {
  const[name,hello]= useState('react-native')
  const clickHandler =()=>{
    hello("react-js");
  }
  return (
    <View style={styles.container}>
      <Text style={{fontSize: 50 ,fontWeight: 'bold'}}> I hope you will love this {name} tutorial </Text>
    <Button title='update tutorial name' onPress={clickHandler} />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor : '#50f9b7',
  },
});

If you run this code, the output is still the same. But we have used ‘hello’ instead of ‘usename’, so it depends on what name you are giving it, but you have to use the method properly.

We have used state in switch . if you can recall you must have seen this code below  while studying switch –

App.js code :

import React, {useState} from 'react';
import { Switch, View,Text, SafeAreaView,StyleSheet} from 'react-native';
  const App = () => {
  const [switchValue, setSwitchValue] = useState(false);


  const toggleSwitch = (value) => {
    setSwitchValue(value);
    
  }
return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Text>
          {switchValue ? 'turned ON' : 'turned OFF'}
        </Text>
        <Switch
          style={{marginTop: 20}}
          onValueChange={toggleSwitch}
          value={switchValue}
        />
      </View>
    </SafeAreaView>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor : '#eecafa'
  },
});


export default App;

The output of this code :

From the above explanation, I hope you understand why it’s working like this!

This was the simplest example of state! hope you learned things in the easiest manner.