React Events & DOM event interaction

HTML

<div id="container"></div>

CSS

body {
  background: #ccc;
}

main {
  background: white;
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
}

h1 {
  font-size: 1.5rem;
  font-weight: bold;
}

h2 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 2rem;
}

table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid #ccc;
}

th {
  font-weight: normal;
  text-align: left;
}

th, td {
  padding: 0.25rem 0.5rem;
}

thead th {
  font-weight: bold;
}

React

const CAPTURE_PHASE = 1;
const BUBBLE_PHASE = 2;
const {Component} = React;

const BLANK_EVENT_RECORD = {
  window: 0,
  document: 0,
  'document.body': 0,
  '#container': 0,
  reactApp: 0,
  reactButton: 0,
  domButton: 0,
};

class App extends Component {
  state = {
    eventCounter: 0,
    eventRecord: BLANK_EVENT_RECORD,
    settings: {
      window: '',
      document: '',
      'document.body': '',
      '#container': '',
      reactApp: '',
      reactButton: '',
      domButton: '',
    },
  };

  componentDidMount() {
    window.addEventListener(
      'click',
      this.onClick.bind(this, 'window', BUBBLE_PHASE)
    );
    window.addEventListener(
      'click',
      this.onClick.bind(this, 'window', CAPTURE_PHASE),
      true
    );

    document.addEventListener(
      'click',
      this.onClick.bind(this, 'document', BUBBLE_PHASE)
    );
    document.addEventListener(
      'click',
      this.onClick.bind(this, 'document', CAPTURE_PHASE),
      true
    );

    document.body.addEventListener(
      'click',
      this.onClick.bind(this, 'document.body', BUBBLE_PHASE)
    );
    document.body.addEventListener(
      'click',
      this.onClick.bind(this, 'document.body', CAPTURE_PHASE),
      true
    );

    const container = document.querySelector('#container');
    container.addEventListener(
      'click',
      this.onClick.bind(this, '#container', BUBBLE_PHASE)
    );
    container.addEventListener(
      'click',
      this.onClick.bind(this, '#container', CAPTURE_PHASE),
      true
    );

    const button = container.querySelector('button');
    button.addEventListener(
      'click',
      this.onClick.bind(this, 'domButton', BUBBLE_PHASE)
    );
    button.addEventListener(
      'click',
      this.onClick.bind(this, 'domButton', CAPTURE_PHASE),
      true
    );
  }

  onPropagationSettingsChange(delta) {
    this.setState(state => ({settings: {...state.settings, ...delta}}));
  }

  resetClicks() {
    this.setState({
     ...