What Is setState In React Native

To change view in your application you’ll use setState – this may re-render your component and any of its child components. setState performs a shallow merge between the new and former state, and triggers a re-render of the component. setState takes either a key-value object or a function that returns a key-value object

Key-Value Object

this.setState({myKey: 'myValue'});

Function

Using a function is beneficial for updating a worth based off the prevailing state or props

this.setState((previousState, currentProps) => {
return {
myInteger: previousState.myInteger+1
}
})

You can also pass an optional callback to setState which will be fired when the component has re-rendered with the new state.

Example setState program

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
export default class MyParentComponent extends Component {
constructor(props) {
super(props);
this.state = {
myInteger: 0
}
}
getRandomInteger() {
const randomInt = Math.floor(Math.random()*100);
this.setState({
myInteger: randomInt
});
}
incrementInteger() {
this.setState((previousState, currentProps) => {
return {
myInteger: previousState.myInteger+1
}

});
}
render() {
return <View style={styles.container}>

<Text>Parent Component Integer: {this.state.myInteger}</Text>

<MyChildComponent myInteger={this.state.myInteger}/>
<Button label="Get Random Integer" onPress={this.getRandomInteger.bind(this)}/>
<Button label="Increment Integer" onPress={this.incrementInteger.bind(this)}/>

</View>
}
}

export default class MyChildComponent extends Component {
constructor(props) {
super(props);
}
render() {
return <View>
<Text>Child Component Integer: {this.props.myInteger}</Text>
</View>

}
}
export default class Button extends Component {
constructor(props) {
super(props);
}
render() {

return <TouchableOpacity onPress={this.props.onPress}>
<View style={styles.button}>

<Text style={styles.buttonText}>{this.props.label}</Text>
</View>
</TouchableOpacity>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
button: {
backgroundColor: '#444',
padding: 10,
marginTop: 10
},
buttonText: {
color: '#fff'
}
});
AppRegistry.registerComponent('MyApp', () => MyParentComponent);

If you like this post, don’t forget to share 🙂

This article is written by our awesome writer
Comments to: State In React Native

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

New Dark Mode Is Here

Sign In to access the new Dark Mode reading option.

Join our Newsletter

Get our monthly recap with the latest news, articles and resources.

By subscribing you agree to our Privacy Policy.

Latest Articles

Explore Tutorials By Categories

About

Codeverb is simply an all in one interactive learning portal, we regularly add new topics and keep improving the existing ones, if you have any suggestions, questions, bugs issue or any other queries you can simply reach us via the contact page

Login

Welcome to Codeverb

Ready to learn something new?
Join Codeverb!

Read Smart, Save Time
  •  
    Strength indicator
  •  
  •  
    Log In | Lost Password