How to update state properties in a component in React.js using setState()?

How to use states in React.js »

Now that you’ve declared state object inside the constructor method, you can now access this object from anywhere in the component. Let’s try to access it from the return() method. To do that, you can access the hours property from the state object as follows:

return <div>Current hour is: {this.state.hrs}</div>

Save the file, and it should re-render the page. Of course, you won’t see anything new there. You’ll still be greeted with “Current hour is:” in the browser because this.state.hrs has a value of empty string ‘’. If you initialize it with something else, like:

this.state = {hrs: ‘24’}

It’ll display Current hour is:24 on the browser.

Now that you have an idea of how to initialize a state property (using this.state) and how to use it inside JSX to display it (using {this.stats.property_name}, it’s time to update the actual hours property value and make sure it’s re-rendered to show the updated value.

Before doing that, right now you’re doing some operation to get the current hour (API request / network request) and these operations are defined inside the render() method directly. However, render() method is called very often and this is probably not the best place to do time consuming operations. Therefore, it’d be better to move getTime() and getHours() methods from render() method to some other place. There is, in fact, a place made for that exclusively, but right now you can move to the the constructor() method, as follows:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(props){
       super(props);
       this.state = {hrs: ''};
        const getHours = () => {
            const currentHours = new Date().getHours();
            return currentHours;
        }

    
        const getTime = () => {
            setTimeout(() => {
                const hours = getHours().toString(); console.log(hours);
                return hours;
            },
            3000);
        }
    }

    render(){
       return <div>Current hour is: {this.state.hrs}</div>
    }
}

ReactDOM.render(
 <App />,
 document.querySelector('#root')  
);

Now, inside the getTime() method, instead of logging out the hours, you’ll be assigning the hours value to the hrs state. This can be done using the setState() method:

this.setState({ hrs: hours });

Keep in mind the following points:

  1. To update a state after it has been initialized once, you’ll call setState() all the time
  2. this.setState() is a additive method. It means, if you had few more properties as initial objects like (this.state.hrs = ‘2’; this.state.mins = ‘45’) and you only update the state for hrs, then the state of this.state.mins will remain unaffected.
  3. You never want to do direct assignment to state objects after it has been initialized once. Something like this.state.hrs = hours; makes no sense whatsoever. setState() is the only way to go!

Let’s remove the getTime() method without removing the setTimeout() method because we want the method setTimeout() to be automatically called. Remove console.log() from setTimeout() so that the whole code looks like:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(props){
       super(props);
       this.state = {hrs: ''};
       const getHours = () => {
           const currentHours = new Date().getHours();
           return currentHours;
       }

  
       setTimeout(() => {
               const hours = getHours().toString();
               this.setState({hrs: hours});
          },
       3000);

    }

    render(){
       return <div>Current hour is: {this.state.hrs}</div>
    }

}

ReactDOM.render(
 <App />,
 document.querySelector('#root')  
);

Next up, save the file. Restart the server and it should be working by now. Initially you’d see “Current hour is:” and after 3 seconds, you’d see “Current hour is:1” or 2, whatever is the active hour in your location.

Leave a Comment