Update State using setState Method in ReactJS

You will learn how to update or modify the state in ReactJS. SetState() method is used to change the states.

this.state = {
tutorial_name : “ReactJS”
}

Above example showing tutorial_name has a value ReactJS. This value will be updated as given below program. It will update ReactJS to ReactJS Tutorial

this.setState({tutorial_name:”ReactJS Tutorial”});

Let us understand with an example

Tutorial.js

import React, { Component } from "react";

class Tutorial extends Component{

    constructor(props){
        super(props);
        this.state = {
            tutorial_name : 'ReactJS'
        };
    }

    updateState = () => {
        this.setState({tutorial_name:'ReactJS Tutorial'});
    }

    render(){
        return(
            <div>
                <h1>Learn Update State using setState Method in {this.state.tutorial_name}</h1>
                <button onClick={this.updateState}>Click Here</button>
            </div>
        );
    }
}

export default Tutorial;

index.js

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

import Tutorial from './Tutorial';

//Rendering component...
ReactDOM.render(<Tutorial />, document.getElementById("root"));