hide and show div on button click in react js
In this article, we explained about hide and show div on the button click event 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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}>×</button> <strong>Success!</strong> Indicates a successful or positive action. </div> } ); } } export default App; |
Please follow and like us: