I am intern ReactJs, how to use multiple-drawer reactJs in same page.
code my App.js file
App = () =>{
const [visible, setVisible] = useState(false);
const showDrawer = () => {
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
return(
// drawer 1
<Button type="primary" className="btn-submit" onClick={this.showDrawer}>submit drawer 1</Button>
<Drawer className="modal-form"onClose={onClose} visible={visible}>
content
</Drawer>
// drawer 2
<Button type="primary" className="btn-submit" onClick={this.showDrawer}>submit drawer 2</Button>
<Drawer className="modal-form"onClose={onClose} visible={visible}>
content
</Drawer>
)
}
how can i click on the button tag to show the corresponding drawer! pls! help me.
If these drawers contain different content then you will have to manage two state variables for each drawer to control the visibility of drawer.
App = () =>{
const [visibleDrawer1, setVisibleDrawer1] = useState(false);
const [visibleDrawer2, setVisibleDrawer2] = useState(false);
const showDrawer1 = () => {
setVisibleDrawer1(true);
};
const onCloseDrawer1 = () => {
setVisibleDrawer1(false);
};
const showDrawer2 = () => {
setVisibleDrawer2(true);
};
const onCloseDrawer2 = () => {
setVisibleDrawer2(false);
};
return(
// drawer 1
<Button type="primary" className="btn-submit"
onClick={this.showDrawer1}>submit drawer 1</Button>
<Drawer className="modal-form"onClose={onCloseDrawer1}
visible={visibleDrawer1}>
content
</Drawer>
// drawer 2
<Button type="primary" className="btn-submit"
onClick={this.showDrawer2}>submit drawer 2</Button>
<Drawer className="modal-form"onClose={onCloseDrawer2}
visible={visibleDrawer2}>
content
</Drawer>
)
}