-
Notifications
You must be signed in to change notification settings - Fork 0
/
ModalComp.js
37 lines (35 loc) · 1.18 KB
/
ModalComp.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
32
33
34
35
36
37
import React,{Component} from 'react';
import {Modal, ModalHeader, ModalBody, ModalFooter,Button } from 'reactstrap';
class ModalComp extends Component{
constructor(props){
super(props)
this.state={
modalIsOpen: false
}
}
toggleModal() {
this.setState({
modalIsOpen: ! this.state.modalIsOpen
});
}
render(){
return(
<div className="container">
<div className="row">
<div className="col-sm-8 offset-sm-2">
<Button color="primary" onClick={this.toggleModal.bind(this)}>Open Modal</Button>
<Modal isOpen={this.state.modalIsOpen}>
<ModalHeader toggle={this.toggleModal.bind(this)}>Modal Title</ModalHeader>
<ModalBody>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem fugiat perspiciatis sint, nostrum labore nobis quidem sed impedit quae quisquam corrupti, libero commodi a quod pariatur quo qui. Id?</ModalBody>
<ModalFooter>
<Button color="primary">Sign Up</Button>
<Button color="secondary" onClick={this.toggleModal.bind(this)}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
</div>
</div>
)
}
}
export default ModalComp;