CraZyDroiD CraZyDroiD -4 years ago 223
CSS Question

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.

Code

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

Answer Source

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() {
    .....
  }
})
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download