Until now, we've dealt with React as a stateless rendering engine, but as we know, applications have state, especially when using forms. So, how would we implement the NewInvestment component in order for it to keep hold of the values of the investment being created and then notify an observer once the user completed the form?

To help us implement this behavior, we are going to use another component internal API—its state.

Let's take the following acceptance criterion:

Given that the inputs of the NewInvestment component are correctly filled, when the form is submitted, it should notify the onCreate observer with the investment attributes:

describe("NewInvestment", function() {
  var TestUtils = React.addons.TestUtils;
  var component, onCreateSpy;

  function findNodeWithClass (className) {
    return TestUtils.findRenderedDOMComponentWithClass(component, className).getDOMNode();
  }

  beforeEach(function() {
    onCreateSpy = jasmine.createSpy('onCreateSpy');
    component...