title: React - onClick event not firing or updating
body: <p>I am new to React. I have downloaded and installed code from this "CSS Modules and React" tutorial:- </p>
  
  <p>Tutorial: <a href="https://css-tricks.com/css-modules-part-3-react/" rel="nofollow noreferrer">https://css-tricks.com/css-modules-part-3-react/</a></p>
  
  <p>Code: <a href="https://github.com/robinrendle/react-css-modules-boilerplate" rel="nofollow noreferrer">https://github.com/robinrendle/react-css-modules-boilerplate</a></p>
  
  <p>The downloaded code is basically working as far as I can tell but I'm unable to get simple onClick events working inside Components.</p>
  
  <p>I've tried all suggestions I can find on internet but none of the solutions have worked for me. Could you please help me get this working. Thank you.</p>
  
  <p>package.json:-</p>
  
  <pre><code>{
    "name": "css-tricks-modules",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "dev": "webpack-dev-server --progress --colors",
      "start": "webpack &amp;&amp; npm run dev"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "babel-core": "^6.7.4",
      "babel-loader": "^6.2.4",
      "babel-preset-es2015": "^6.6.0",
      "babel-preset-react": "^6.5.0",
      "browser-sync": "^2.12.8",
      "browser-sync-webpack-plugin": "^1.0.1",
      "css-loader": "^0.23.1",
      "extract-text-webpack-plugin": "^1.0.1",
      "react": "^15.0.2",
      "react-dom": "^15.0.2",
      "react-router": "^2.4.0",
      "static-site-generator-webpack-plugin": "^2.0.1",
      "webpack": "^1.12.14",
      "webpack-dev-server": "^1.14.1"
    },
    "dependencies": ""
  }
  </code></pre>
  
  <p>webpack.config.js:-</p>
  
  <pre><code>var ExtractTextPlugin = require('extract-text-webpack-plugin'),
      StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin'),
      BrowserSyncPlugin = require('browser-sync-webpack-plugin'),
      data = require('./data.js'),
      path = require('path');
  
  module.exports = {
      entry: './src/router',
      output: {
          path: './build',
          filename: 'bundle.js',
          libraryTarget: 'umd',
          publicPath: '/'
      },
      module: {
          loaders: [
              {
                  test: /\.js$/,
                  loader: 'babel',
                  // include: __dirname + '/src',
                  include: path.join(__dirname,'src'),
              },
              {
                  test: /\.css$/,
                  loader: ExtractTextPlugin.extract('css?modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]'),
                  // include: __dirname + '/src'
                  include: path.join(__dirname,'src')
              }
          ],
      },
      plugins: [
          new ExtractTextPlugin("styles.css"),
          new StaticSiteGeneratorPlugin('main', data.routes, data),
          new BrowserSyncPlugin({
              host: 'localhost',
              port: 3000,
              proxy: 'http://localhost:8080/'
          })
      ]
  };
  </code></pre>
  
  <p>Home.js:-</p>
  
  <pre><code>import React from 'react'
  import CoolButton from '../components/Button/Button'
  import Counter from '../components/counter'
  import App from '../components/app'
  import App2 from '../components/app2'
  import SayHello from '../components/sayHello'
  
  export default class Home extends React.Component {
    render() {
      return (
          &lt;div&gt;
              &lt;h1&gt;Home page&lt;/h1&gt;
              &lt;p&gt;This is a home page&lt;/p&gt;
              &lt;App /&gt;
              &lt;App2 /&gt;
              &lt;SayHello /&gt;
              &lt;CoolButton text='A super cool button'/&gt;
          &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>sayHello.js (onClick event is not working):-</p>
  
  <pre><code>import React from 'react'
  
  export default class SayHello extends React.Component {
    constructor(props) {
      super(props);
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick() {
      console.log("Hello!!!");
      alert("Hello!!!!");
    }
  
    render() {
      return (
        &lt;button onClick={this.handleClick}&gt;
          Say hello
        &lt;/button&gt;
      );
    }
  }
  </code></pre>
  
  <p>app.js (onClick event not working):-</p>
  
  <pre><code>import React from 'react'
  
  export default class App extends React.Component {
  
     constructor(props) {
        super(props);
  
        this.state = {
           data: 'Initial data...'
        }
  
        this.updateState = this.updateState.bind(this);
  
     };
  
     updateState() {
        this.setState({data: 'Data updated!!!'})
     }
  
     render() {
        return (
           &lt;div&gt;
              &lt;button onClick = {this.updateState}&gt;CLICK&lt;/button&gt;
              &lt;h4&gt;{this.state.data}&lt;/h4&gt;
           &lt;/div&gt;
        );
     }
  }
  </code></pre>
  
  <p>app2.js (onClick event not working):-</p>
  
  <pre><code>import React from 'react';
  
  export default class App2 extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {isToggleOn: true};
  
      // This binding is necessary to make `this` work in the callback
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick() {
      this.setState(prevState =&gt; ({
        isToggleOn: !prevState.isToggleOn
      }));
    }
  
    render() {
      return (
        &lt;button onClick={this.handleClick}&gt;
          {this.state.isToggleOn ? 'ON' : 'OFF'}
        &lt;/button&gt;
      );
    }
  }
  </code></pre>
  
  <p>The code compiles without errors and in Components "SayHello" and "App2" their initial state text is rendered but their onClick event isn't occurring or the data isn't updating. I think most likely the event isn't firing but I'm not sure.</p>
  
  <p>I'd much appreciate advice on where/why the problem is occurring and how to fix. Thanks.</p>