title: React onClick event handler not working using Next.js
body: <p>I'm making a Reddit clone and I'm using Next.js so its server-side rendered. I started without using Next.js and when I learned about it, I immediately switched to it.</p>
  
  <p>I've created a custom <code>_app.js</code> so the header and sidebar exist on every page, and for it to act as the topmost component to hold application state. The later isn't quite working out.</p>
  
  <p>Here's <code>.project/src/pages/_app.js</code>: </p>
  
  <pre><code>import App, { Container } from 'next/app';
  
  // Components
  import Header from '../components/Header/Header';
  
  const MainLayout = props =&gt; (
    &lt;React.Fragment&gt;
      &lt;Header
        isSidebarOpen={props.isSidebarOpen}
        sidebarToggle={props.sidebarToggle}
      /&gt;
      {props.children}
    &lt;/React.Fragment&gt;
  );
  
  export default class MyApp extends App {
    static async getInitialProps({ Component, router, ctx }) {
      let pageProps = {};
  
      if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx);
      }
  
      return { pageProps };
    }
  
    state = {
      isSidebarOpen: true
    };
  
    sidebarToggle = () =&gt; {
      this.setState({ isSidebarOpen: !this.state.isSidebarOpen });
    };
  
    render() {
      const { Component, pageProps } = this.props;
      return (
        &lt;Container&gt;
          &lt;MainLayout
            isSidebarOpen={this.state.isSidebarOpen}
            sidebarToggle={this.sidebarToggle}
          &gt;
            &lt;Component {...pageProps} /&gt;
          &lt;/MainLayout&gt;
        &lt;/Container&gt;
      );
    }
  }
  </code></pre>
  
  <p>The issue I'm having is, <code>isSidebarOpen</code> and <code>sidebarToggle</code> are being passed to exactly where I need them – they show up in the console – but the onClick handler doesn't activate and if I change <code>isSidebarOpen</code>, it doesn't take effect until I restart the server. I used this approach before using Next.js and it worked as expected.</p>
  
  <p>How can I achieve what I'm trying to do? I've read the docs, searched Google and Stack Overflow. I even checked issues on their repo without luck. I suspect it to be something to do with a custom <code>_app.js</code>, as the props are passed down correctly.</p>