I am trying to make use of bootstrap's toggle button group to select an option of platform. But the onChange event is not getting called.

class Hello extends React.Component { constructor(props) { super(props); this.handlePlatformChange = this.handlePlatformChange.bind(this); } handlePlatformChange(event) { /* THIS DOES NOT GET CALLED */ console.log(event.target.value); } render() { return (<div className="container"> <div className="btn-group btn-group-toggle" data-toggle="buttons" onChange={this.handlePlatformChange} > <label className="btn btn-info active"> <input type="radio" name="platform" value="web" autoComplete="off" /> Web </label> <label className="btn btn-info"> <input type="radio" name="platform" value="android" autoComplete="off" /> Android </label> <label className="btn btn-info"> <input type="radio" name="platform" value="ios" autoComplete="off" /> iOS </label> </div> </div> ); } }

My application is using webpack and below dependencies

"dependencies": { "axios": "^0.18.0", "bootstrap": "^4.1.3", "express": "^4.16.3", "jquery": "^3.3.1", "moment": "^2.22.2", "popper.js": "^1.14.3", "query-string": "^6.1.0", "react": "^16.4.2", "react-bootstrap": "^0.32.1", "react-dom": "^16.4.2", "react-router-dom": "^4.3.1" },

I created a jsfiddle (by only including related libraries) to reproduce the issue.

"bootstrap": "^4.1.3", "jquery": "^3.3.1", "popper.js": "^1.14.3", "react": "^16.4.2", "react-dom": "^16.4.2",

Update-1:

With the help from comments, I got the jsfiddle to work by using popper.js@1.14.3 instead of 1.14.4. I Also discovered that I had to import libraries in a specific order only. Working sample - https://codepen.io/hussaintamboli/pen/PdoVvG?editors=1111

How do I fix the order with webpack?

Update-2:

I created this github repository to reproduce the issue with react+bootstrap4+webpack4