CODEWITHSUNDEEP
htmlcssreactjs
CraZyDroiD
CraZyDroiD

Reputation: 7105

open reactjs sideNav on click

I'm trying to open react sideNav bar on button click. I'm referring these articles to do this:

https://github.com/gauravchl/react-simple-sidenav

https://www.npmjs.com/package/react-simple-sidenav

https://gauravchl.github.io/react-simple-sidenav/demo/

I have implemented it correctly but i'm stuck on opening the sideNav on clicking a button.

<div>
    <MenuIcon onClick={() => this.setState({showNav: true})}/>
    <SideNav
        title="Simple Sidenav"
        items={['Item 1', 'Item 2']}
        openFromRight="true"
        showNav = {this.state.showNav}
    />
</div>

If i give showNav = 'true' , the sideNav opens by default when the page opens. if i give showNav = {this.state.showNav} i get an error:

Warning: validateDOMNesting(...): <html> cannot appear as a child of <div>. See div > App > html.
printWarning @ bundle.js:11845
bundle.js:35792 Uncaught TypeError: Cannot read property 'showNav' of null
    at Notification.render (bundle.js:35792)
    at bundle.js:26635
    at measureLifeCyclePerf (bundle.js:25914)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (bundle.js:26634)
    at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:26661)
    at ReactCompositeComponentWrapper.performInitialMount (bundle.js:26201)
    at ReactCompositeComponentWrapper.mountComponent (bundle.js:26097)
    at Object.mountComponent (bundle.js:18478)
    at ReactDOMComponent.mountChildren (bundle.js:25215)
    at ReactDOMComponent._createInitialChildren (bundle.js:22220)

Upvotes: 0

Views: 875

Answers (3)

user12527602
user12527602

Reputation: 1

const [showNav, setShowNav] = useState(false)
    return (

    <MenuIcon className="MenuIconStyle" onClick={() => setShowNav(true)} />
                <SideNav
                    showNav={showNav}
                    onHideNav={() => setShowNav(false)}
                    items={['Item 1', 'Item 2']}
                    titleStyle={{ backgroundColor: '#4CAF50' }}
                    itemStyle={{ backgroundColor: '#fff' }}
                    itemHoverStyle={{ backgroundColor: '#CDDC39' }}
                    openFromRight={false}
                />

Upvotes: 0

Mayank Shukla
Mayank Shukla

Reputation: 104379

Checked the github link, in description they didn't define the initial state of the showNav variable, you need to add this part in your component, to define the initial value it will work:

getInitialState : function() {
   return {
     showNav: false,
   };
},

If you check the project file demo/src/layout.js, showNav is defined, in description they didn't wrote a working code, mainly focused on how to use SideNav, a sample code.

Update:

import react from 'react';
import SideNav, {MenuIcon} from 'react-simple-sidenav';

React.createClass({

  getInitialState : function() {
     return {
        showNav: false,
     };
  },

  render() {
    .....
  }
})

Upvotes: 2

sanket
sanket

Reputation: 664

Initilize the state for 'showNav'

this.state = {
 showNav: false
}

Upvotes: 0

Related Questions