React.js: Collapsible menu does not return to original state

Question

I'm fairly new to React and I would like to ask for a little help.

I made a side menu/navigation using Material Design bootstrap -- list group, list group item, MDBCollapse, NavLink

Here is the code:


    import React, { useState } from 'react';
    import logo from "../assets/sbc-logo.png";
    import { MDBListGroup, MDBListGroupItem, MDBIcon, MDBCollapse, MDBBtn } from 'mdbreact';
    import { NavLink } from 'react-router-dom';

    const sideNavigation = () => {

        const [toggleCollapse, setToggleCollapse] = useState(false);

        return (
            <div className="sidebar-fixed position-fixed">
                {<a href="#!" className="logo-wrapper waves-effect">
                    <img alt="MDB React Logo" className="img-fluid" src={logo}/>
                </a>}
                <br/>
                <MDBListGroupItem class="list-group-item-header" onClick={() => { setToggleCollapse(true); }}>
                    <MDBIcon icon="exchange-alt" className="mr-3"/>
                    Transfers
                </MDBListGroupItem>
                <MDBCollapse id="basicCollapse" isOpen={toggleCollapse}>
                <NavLink to="/inbox" activeClassName="activeClassItem">
                    <MDBListGroupItem>
                        <MDBIcon icon="inbox" className="mr-2"/>
                        Inbox
                    </MDBListGroupItem>
                </NavLink>

                <NavLink to="/sent" activeClassName="activeClassItem">
                    <MDBListGroupItem>
                        <MDBIcon icon="paper-plane" className="mr-2"/>
                        Sent
                    </MDBListGroupItem>
                </NavLink>

                <NavLink to="/acknowledged" activeClassName="activeClassItem">
                    <MDBListGroupItem>
                        <MDBIcon icon="thumbs-up" className="mr-2"/>
                        Acknowledged
                    </MDBListGroupItem>
                </NavLink>

                <NavLink to="/bcpmode" activeClassName="activeClassItem">
                    <MDBListGroupItem>
                        <MDBIcon icon="power-off" className="mr-2"/>
                        BCP Mode
                    </MDBListGroupItem>
                </NavLink>
                </MDBCollapse>
            </div>
        );
    }

    export default sideNavigation;

The side menu has no issue when I first click it. However, it does not return back when I click it again. Any advise would help please.

Thank you.

score 1 · Answer 1 · answered Mar 19 '20 at 06:52

1

You're not toggling the element but setting it to true, try this:

onClick={() => { setToggleCollapse(toggle => !toggle); }}

answered Mar 19 '20 at 06:52

Clarity

10,730
2
25
35

score 1 · Accepted Answer · answered Mar 19 '20 at 06:53

Well you have

onClick={() => { setToggleCollapse(true); }}

Which means when you click it, it sets it to true every time, whether it's open or not. On click you should invert the value based on the current value. Also your naming doesn't quite make sense, "collapsed" should be the adjective, and the action should be to set that value. So something like this:

const [collapsed, setCollapsed] = useState(false);

...

<MDBListGroupItem class="list-group-item-header" onClick={() => { setCollapsed(!collapsed); }}>

React.js: Collapsible menu does not return to original state

2 Answers2