import React from 'react';

import {

Container,

Button,

Modal,

ModalBody,

ModalHeader,

ModalFooter

} from 'mdbreact';

class ModalPage extends React.Component {

constructor(props) {

super(props);

this.state = {

modal1: false,

modal2: false

};

}

toggle = nr => {

let modalNumber = 'modal' + nr;

this.setState({

[modalNumber]: !this.state[modalNumber]

});

};

render() {

return (

<Container>

<Button onClick={() => this.toggle(1)}>First Modal</Button>

<Modal isOpen={this.state.modal1} toggle={() => this.toggle(1)}>

<ModalHeader toggle={() => this.toggle(1)}>Modal title</ModalHeader>

<ModalBody>(...)</ModalBody>

<ModalFooter>

<Button color="secondary" onClick={() => this.toggle(1)}>

Close

</Button>

<Button color="primary" onClick={() => this.toggle(2)}>

Open new Modal

</Button>

</ModalFooter>

</Modal>

<Modal

backdrop={false}

isOpen={this.state.modal2}

toggle={() => this.toggle(2)}

>

<ModalHeader toggle={() => this.toggle(2)}>Second Modal</ModalHeader>

<ModalBody>(...)</ModalBody>

<ModalFooter>

<Button color="secondary" onClick={() => this.toggle(2)}>

Close

</Button>

<Button color="primary">Save changes</Button>

</ModalFooter>

</Modal>

</Container>

);

}

}

export default ModalPage;