React js Update State onclick Example Tutorial

In this article, we will know about how to update state onclick event handler in react js(React js Update State onclick Example Tutorial). A state is one type of object variable. here we will understand with a simple example that how to update the state.

So you can see the following example.

React Updating State With Class Component

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';

class App extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
	showModal: false
    };
    this.open = this.open.bind(this);
  }
  open() {
     this.setState({showModal: true});
  }
render() {
  return (
    <Button onClick={this.open}>Open Modal</Button>
  );
 }
}

export default App;

import React, { Component } from 'react';

import { Button } from 'react-bootstrap';

class App extends Component {

constructor(props) {

super(props);

this.state = {

showModal: false

};

this.open = this.open.bind(this);

}

open() {

this.setState({showModal: true});

}

render() {

return (

<Button onClick={this.open}>Open Modal</Button>

);

}

export default App;

React Updating State With Functional Component

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'react-bootstrap';
    
function App() {
  const [showModal, setShow] = useState(false);
  const open = () => setShow(true);
   
  return (      
         <Button onClick={this.open}>Open Modal</Button>
    );
}
   
export default App;

import React, {useState} from 'react';

import logo from './logo.svg';

import './App.css';

import { Button } from 'react-bootstrap';

function App() {

const [showModal, setShow] = useState(false);

const open = () => setShow(true);

return (

<Button onClick={this.open}>Open Modal</Button>

);

}

export default App;