Open In App

ReactJS setState()

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

All the React components can have a state associated with them. The state of a component can change either due to a response to an action performed by the user or an event triggered by the system. Whenever the state changes, React re-renders the component to the browser. Before updating the value of the state, we need to build an initial state setup. Once we are done with it, we use the setState() method to change the state object. It ensures that the component has been updated and calls for re-rendering of the component.

React JS setState

setState is an asynchronous call means if a synchronous call gets called it may not get updated at the right time like to know the current value of an object after an update using setState it may not give the current updated value on the console. To get some behavior of synchronous need to pass function instead of object to setState.

Syntax:

We can use setState() to change the state of the component directly as well as through an arrow function.

setState({ stateName : updatedStateValue })
// OR
setState((prevState) => ({
stateName: prevState.stateName + 1
}))

Steps to Create React Application:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project structure:

Screenshot-from-2023-11-20-12-16-49

Approach 1: Updating single attribute

We set up our initial state value inside constructor function and create another function updateState() for updating the state. Now when we click on the button, the latter gets triggered as an onClick event which changes the state value. We perform setState() method in our updateState() function by writing:

this.setState({greeting : 'GeeksForGeeks welcomes you !!'}) 

As you can see, we are passing an object to setState(). This object contains the part of the state we want to update which, in this case, is the value of greeting. React takes this value and merges it into the object that needs it. It’s just like the button component asks what it should use for updating the value of greeting and setState() responds with an answer.

Javascript




// Filename - App.js
 
import React, { Component } from "react";
 
class App extends Component {
    constructor(props) {
        super(props);
 
        // Set initial state
        this.state = {
            greeting:
                "Click the button to receive greetings",
        };
 
        // Binding this keyword
        this.updateState = this.updateState.bind(this);
    }
 
    updateState() {
        // Changing state
        this.setState({
            greeting: "GeeksForGeeks welcomes you !!",
        });
    }
 
    render() {
        return (
            <div>
                <h2>Greetings Portal</h2>
                <p>{this.state.greeting}</p>
 
                {/* Set click handler */}
                <button onClick={this.updateState}>
                    Click me!
                </button>
            </div>
        );
    }
}
 
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Approach 2: Updating multiple attributes

The state object of a component may contain multiple attributes and React allows using setState() function to update only a subset of those attributes as well as using multiple setState() methods to update each attribute value independently. 

We set our initial state by initializing three different attributes, and then we create a function updateState() which updates its value whenever it is called. Once again this function gets triggered as an onClick event and we get the updated values of our states at the same time. 

Javascript




// Filename - App.js
 
import React, { Component } from "react";
 
class App extends Component {
    constructor(props) {
        super(props);
 
        // Set initial state
        this.state = {
            test: "Nil",
            questions: "0",
            students: "0",
        };
 
        // Binding this keyword
        this.updateState = this.updateState.bind(this);
    }
 
    updateState() {
        // Changing state
        this.setState({
            test: "Programming Quiz",
            questions: "10",
            students: "30",
        });
    }
 
    render() {
        return (
            <div>
                <h2>Test Portal</h2>
                <p>{this.state.test}</p>
 
                <p>{this.state.questions}</p>
 
                <p>{this.state.students}</p>
                {/* Set click handler */}
                <button onClick={this.updateState}>
                    Click me!
                </button>
            </div>
        );
    }
}
 
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Approach 3: Updating state values using props.

We set up an array of strings testTopics as props for our component. A function listOfTopics is created to map all the strings as list items in our state topics. The function updateState gets triggered and sets the topics to list items. When we click on the button, we get updated state values. This method is well-known for handling complex data and updating the state very easily. 

Javascript




// Filename - App.js
 
import React, { Component } from "react";
 
class App extends Component {
    static defaultProps = {
        testTopics: [
            "React JS",
            "Node JS",
            "Compound components",
            "Lifecycle Methods",
            "Event Handlers",
            "Router",
            "React Hooks",
            "Redux",
            "Context",
        ],
    };
 
    constructor(props) {
        super(props);
 
        // Set initial state
        this.state = {
            testName: "React js Test",
            topics: "",
        };
 
        // Binding this keyword
        this.updateState = this.updateState.bind(this);
    }
 
    listOfTopics() {
        return (
            <ul>
                {this.props.testTopics.map((topic) => (
                    <li>{topic}</li>
                ))}
            </ul>
        );
    }
 
    updateState() {
        // Changing state
        this.setState({
            testName: "Test topics are:",
            topics: this.listOfTopics(),
        });
    }
 
    render() {
        return (
            <div>
                <h2>Test Information</h2>
                <p>{this.state.testName}</p>
                <p>{this.state.topics}</p>
                {/* Set click handler */}
                <button onClick={this.updateState}>
                    Click me!
                </button>
            </div>
        );
    }
}
 
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Approach 4: Updating the state using its previous value.

We create an initial state count having a value of 0. The function updateState() increments the present value of the state by 1 whenever it is called. This time we use setState() method in an arrow function by passing prevState as a parameter. The current value of the state is accessed with prevState.stateName which gets incremented by 1 whenever we press the button. This method is really useful when we are setting a value in the state in such a way that it depends on its previous value. For example, toggling a boolean (true/false) or incrementing/decrementing a number.

Javascript




// Filename - App.js
 
import React, { Component } from "react";
 
class App extends Component {
    constructor(props) {
        super(props);
 
        // Set initial state
        this.state = {
            count: 0,
        };
 
        // Binding this keyword
        this.updateState = this.updateState.bind(this);
    }
 
    updateState() {
        // Changing state
        this.setState((prevState) => {
            return { count: prevState.count + 1 };
        });
    }
 
    render() {
        return (
            <div>
                <h2>Click Counter</h2>
                <p>
                    You have clicked me {this.state.count}{" "}
                    times.
                </p>
                {/* Set click handler */}
                <button onClick={this.updateState}>
                    Click me!
                </button>
            </div>
        );
    }
}
 
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:



Last Updated : 22 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads