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{

        this.state = {


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

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 />


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


About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →