React Native State Explained

In the previous chapter, we talked about React Native class based components. I told you that class based components have more functionalities than functional based components. In this chapter, we are going to discuss one of those functionalities. React Native State. That’s defining a component state. State can’t be defined in functional based components. That can be only defined in Class based components.

What is React Native State?

State is how react handles changing the content that is shown on the screen. We use State in React Native components, when we know that data will change. Let’s say, when the app is launched, data hasn’t arrived yet from the database. Then state should be empty and nothing is shown on the screen. After some time data is fetched from database and state should be changed to new data fetched from the database. Then we render that state value to the screen to show data on the screen.

React native state is defined as a component property. It contains a key – value pair. The key is used to access the value of a state and show it on the screen. setState() method is used to change the value of a key.

How to define state?

    state = {
        name: "",
        university: ""
    };

This is one of the ways the state is defined. Other way is given below.

    constructor(props) {
        super(props);
        this.state = {
            name: "",
            university: ""
        };
    }

You will learn about the difference of these ways in the future. So, let’s define state in the class based component which we defined in last article.

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

class DataList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            name: "Buwaneka",
            university: "Sabaragamuwa University"
        };
    }

    render() {
        return (
            <Text>Class based Components has more functionalities.</Text>
        );
    }
}

export default DataList;

How to access and change the state value?

When the setState() method is called, the value of the key in the state is changed and the react native component is re-rendered to update the changes in user interface.

Let’s access the state and show it on the screen. You have to use this.state.state_key to access it. Follow the below mentioned code to access the state and show it on the screen and run the app.

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

class DataList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            name: "Buwaneka",
            university: "Sabaragamuwa University"
        };
    }

    render() {
        return (
            <View>
                <Text>{this.state.name}</Text>
                <Text>{this.state.university}</Text>
            </View>
        );
    }
}

export default DataList;

This is how you access state. When you do it between JSX tags, make sure to put curly brackets as above mentioned at the two sides. Now let’s see what the UI looks like. Run the app. You should get the following UI.

Hello World React Native

Play with Values

Now let’s change the state value and show it on the screen.

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

class DataList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            name: "Buwaneka",
            university: "Sabaragamuwa University"
        };
    }

    componentWillMount(){ // We will learn about this method in a later chapter
        this.setState({ name: "Buwaneka Sudheera", university: "Sabaragamuwa University of Sri Lanka" });
    }

    render() {
        return (
            <View>
                <Text>{this.state.name}</Text>
                <Text>{this.state.university}</Text>
            </View>
        );
    }
}

export default DataList;

As you can see, there is a method called componentWillMount() in the code. We will discuss that in a later article. You just have to know that componentWillMount() renders when the component renders, for now.

So, now we have changed the state values. Run the app and check the UI.

Change text React Native

So, now we have changed the state values successfully. This is how we use state to change the values and display it on the screen.

Thank you.

Leave a Reply

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