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;

Please follow and like us: