hide and show div on button click in react js

In this article, we explained about hide and show div on button click in react js. we will explain by a simple example that how to hide and show div.

So you can see the following example.

How to hide and show div in react js

src/app.js

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
 
class App extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
	showDiv: false
    };
    this.open = this.open.bind(this);
  }
  open() {
	const { showDiv } = this.state;
	this.setState({
		showDiv: !showDiv,
	});
  }
render() {
  return (
    <Button onClick={this.open}>Open Modal</Button>
	{ this.state.showDiv &&
		<div className="alert alert-success alert-dismissible notification">
			<button type="button" className="close" data-dismiss="alert" onClick={this.open}>&times;</button>
			<strong>Success!</strong> Indicates a successful or positive action.
		</div> }
  );
 }
}
 
export default App;

import React, { Component } from 'react';

import { Button } from 'react-bootstrap';

class App extends Component {

constructor(props) {

super(props);

this.state = {

showDiv: false

};

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

}

open() {

const { showDiv } = this.state;

this.setState({

showDiv: !showDiv,

});

}

render() {

return (

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

{ this.state.showDiv &&

<strong>Success!</strong> Indicates a successful or positive action.

</div> }

);

}

export default App;