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.
>Solution :
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>
)
}