Reactjs State With Update Onclick Example

Today now in this blog i will show about reactjs state. We know in reactjs state means it is an internal object of class and also it’s a private. So we can not use it out of class. So this is one type of object but we know it’s work as like a variable. So in this variable we have a key and also a value and we can update. But props we can not change.

State Example With Onclick Button Count

So now we need to use state first we have to define a constructor and need to call “super();” keyword. Now this is not a react keyword but it’s a javascript super keyword.So we need to update state we can use “setState()” method.

/src/User.js file

import React from 'react'

class User extends React.Component{

    constructor(){
        super();
        this.state = {
            counter:0
        }
    }

    incrementState(){
        this.setState({
            counter:this.state.counter+1
        })
    }

    render(){
        return(
            <div>
                <h1>Counter : {this.state.counter}</h1>
                <button onClick={()=>{this.incrementState()}} class="btn btn-primary">Click For Increment</button>
            </div>
        )  
    }
}

export default User;

/src/App.js file

import React from 'react';
import './App.css';
import User from './User';

function App() {
  return (
    <div className="App">
      <header className="App-header">

        <User />

      </header>
    </div>
  );
}

export default App;

Read Also : How To Create Functional Component In React JS ?

hope it will help you. Also you can follow us on Facebook