React.js – State

The state of a React component is simply an object whose value may change over the lifecycle of the component.

Before we discuss further, let’s just do a little comparison between props and state.

• Comparing Props and State
• Example of Using State
• Conventions on React State
• A Last Example Using State

1. Comparing Props and State

The table below outlines the difference between props and state in react.

A similarity is that both props and state holds information that influences the UI.

2. An Example using State

Let’s create a child component that would display a message that says “Welcome guest”. The child component would have a button below this message. When the button is clicked, the message would change to “Thanks a lot for subscribing!”.

The steps are:

• create and initialise a state object in the Message component. This is done in the class constructor
• bind the state variable in the render function
• add the markup for the button element
• write a click event for the button that changes the message

The complete Message class is given below:

import React, {Component}  from 'react'

class Message extends Component {

    //Initial state is set in the constructor
    constructor(){
        super();
        this.state = {
            message : 'Welcome guest'
        }
    }

    //The function to change the state
    changeMessage(){
        this.setState({
            message: "Thanks a lot for subscribing!"
        })
    }

    render() {
        return (
            <div>
                 <h2> {this.state.message}</h2>
                <button onClick={() => this.changeMessage()}>
                    Please subscribe
                </button>
            </div>
        ) 
    }
}

export default Message

I hope this very clear. And make sure you try out this by yourself.

3. Conventions on State in React

• define some initial state
• state is defined in the constructor through a call to the super() method
• state should not be updated explicitly. The setState() function should be used. This is because React uses observables to track what changes are made to the state and update the component accordingly. In this way, changes in state could be detected. The syntax is:

     this.state = {
        attribute : "new value"
     }

• state updates are independent – The state object could contain multiple values. React allows for the setState() function to update only a subset of these attributes.

4. A Last Example using State

This example is just a simple example that shows how multiple states can be used. This is similar to the previous example. However, in this one, we have two attribute: header and content. We only change one of them on button click

import React from 'react';

class Example extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header from state",
         content: "Body from state"
      }
   }

   changeHead(){
       this.setState({
           header: "This is new Header"
       })
   }

   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
            <button onClick={() => this.changeHead()}>
                Change Heder
            </button>
         </div>
      );
   }
}
export default Example;

If you’ve come this far, then congrats!. In the next part we examine React state in more details. We’ll see the result of trying to update the state explicitly. So let’s move on!