React - onClick event not firing or updating - reactjs

Question

I am new to React. I have downloaded and installed code from this "CSS Modules and React" tutorial:-
Tutorial: https://css-tricks.com/css-modules-part-3-react/
Code: https://github.com/robinrendle/react-css-modules-boilerplate
The downloaded code is basically working as far as I can tell but I'm unable to get simple onClick events working inside Components.
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.
package.json:-
{
"name": "css-tricks-modules",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --progress --colors",
"start": "webpack && 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": ""
}
webpack.config.js:-
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&importLoaders=1&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/'
})
]
};
Home.js:-
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 (
<div>
<h1>Home page</h1>
<p>This is a home page</p>
<App />
<App2 />
<SayHello />
<CoolButton text='A super cool button'/>
</div>
)
}
}
sayHello.js (onClick event is not working):-
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 (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}
app.js (onClick event not working):-
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 (
<div>
<button onClick = {this.updateState}>CLICK</button>
<h4>{this.state.data}</h4>
</div>
);
}
}
app2.js (onClick event not working):-
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 => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
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.
I'd much appreciate advice on where/why the problem is occurring and how to fix. Thanks.