CODEWITHSUNDEEP
javascriptreactjsantddrawer
quangdev
quangdev

Reputation: 7

multiple-drawer reactJs in same page not working

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.

Upvotes: 0

Views: 444

Answers (1)

Mohsin Murad
Mohsin Murad

Reputation: 81

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>
    )
   }

Upvotes: 1

Related Questions