event bubbling poc: checkbox input -> label -> div

selectCheckboxesLi.js

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  state = {
    selected: false
  };

  toggle() {
    console.log("toggle called");
    this.setState(prevState => {
      prevState.selected = !prevState.selected;
      return prevState;
    });
  }

  render() {
    return (
      <div
        className="App"
        style={{ padding: "10px", border: "1px solid blue" }}
        onClick={ev => {
          console.log("onclick triggered on", ev.target);
          ev.stopPropagation();
          this.toggle();
        }}
      >
        <label
          onClick={ev => {
            console.log("onclick triggered on", ev.target);
            ev.stopPropagation();
          }}
        >
          <input
            onClick={ev => {
              console.log("onclick triggered on", ev.target);
              ev.stopPropagation();
              this.toggle();
            }}
            checked={this.state.selected}
            type="checkbox"
          />
          click me
        </label>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);