Component events

UI applications have user events; in the web, they came in the form of DOM events. As React wraps each DOM element into React elements, handling them will be a little different yet very familiar.

For this next example, let's suppose that our application will allow users to delete an investment. We could write this requirement through the following acceptance criterion:

Given an investment, InvestmentListItem should notify an observer onClickDelete when the delete button is clicked on.

The idea here is the same as presented in the Integrate Views with observers section of Chapter 3, Testing Frontend Code.

So, how should we set the observer in a component? As we've already seen previously, props are the way to pass attributes to our component, as follows:

describe("InvestmentListItem", function() {
  var TestUtils = React.addons.TestUtils;

  describe("given an Investment", function() {
    var investment, component, onClickDelete;

    beforeEach(function() {
      investment...