nhunzaker · October 29, 2016 12:20
diff --git a/bubble.html b/bubble.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Delegation</title>
  </head>
  <body>
    <div id="container">Loading...</div>

    <script src="../../lib/react.js"></script>
    <script src="../../lib/react-dom.js"></script>
    <script src="../../lib/babel.js"></script>

    <script type="text/babel">
      var messages = [
        'The new div should also be clickable and update again; without me having to add any new JavaScript code.',
        'This is the second div for the event delegation test. Clicking it will load the third div',
        'This is the third div for the event delegation test. Clicking it will return you to the original div'
      ]

      class Test extends React.Component {
        constructor (props, context) {
          super(props, context)

          this.state = {
            step : 0
          }
        }

        step () {
          this.setState({
            step: (this.state.step + 1) % 3
          })
        }

        render () {
          return (
            <div onClick={() => this.step()}>
              {messages[this.state.step]}
            </div>
          )
        }
      }

      ReactDOM.render(<Test />, container)
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Delegation</title>
	</head>
	<body>
	<div id="container">Loading...</div>

	<script src="../../lib/react.js"></script>
	<script src="../../lib/react-dom.js"></script>
	<script src="../../lib/babel.js"></script>

	<script type="text/babel">
	var messages = [
	'The new div should also be clickable and update again; without me having to add any new JavaScript code.',
	'This is the second div for the event delegation test. Clicking it will load the third div',
	'This is the third div for the event delegation test. Clicking it will return you to the original div'
	]

	class Test extends React.Component {
	constructor (props, context) {
	super(props, context)

	this.state = {
	step : 0
	}
	}

	step () {
	this.setState({
	step: (this.state.step + 1) % 3
	})
	}

	render () {
	return (
	<div onClick={() => this.step()}>
	{messages[this.state.step]}
	</div>
	)
	}
	}

	ReactDOM.render(<Test />, container)
	</script>
	</body>
	</html>