title: TypeScript 1.8 - Why does my React Stateless Function component throw a TypeError at runtime?
body: <p>I am attempting to create a <a href="https://facebook.github.io/react/docs/reusable-components.html#stateless-functions" rel="nofollow">React Stateless Function component</a> as described in the TypeScript 1.8 <a href="https://github.com/Microsoft/TypeScript/wiki/What&#39;s-new-in-TypeScript" rel="nofollow">release notes</a>.
  This compiles without error but throws a <code>TypeError</code> at runtime.
  Why?</p>
  
  <p>I have an interface</p>
  
  <pre><code>interface AppError {
    id: string;
    message: string;
  }
  </code></pre>
  
  <p>My component looks like this:
      import * as React from "react";</p>
  
  <pre><code>import { AppError } from "../error.interface";
  
  const ErrorMessage = (props: {key: string, error: AppError}) =&gt; (
    &lt;div className="col-lg-12" id={this.props.error.id}&gt;
      &lt;h2 className="page-header"&gt;&lt;small&gt;{this.props.error.message}&lt;/small&gt;  &lt;/h2&gt;
    &lt;/div&gt;
  );
  
  export default ErrorMessage;
  </code></pre>
  
  <p>It is used from another component like this:</p>
  
  <pre><code>import * as React from "react";
  
  import * as ErrorModel from "./../error.model";
  import { AppError } from "./../error.interface";
  
  import ErrorMessage from "./error.message.tsx";
  
  
  export default class ErrorContainer extends React.Component&lt;{}, ErrorContainerState&gt; {
  
      constructor(props) {
          super(props);
        this.state = this._buildState();
      }
  
      componentDidMount() { ErrorModel.observable.addListener(this._onModelUpdate.bind(this)); }
      componentWillUnmount() { ErrorModel.observable.removeListener(this._onModelUpdate.bind(this)); }
  
      render() {
          let divStyle = {
              marginTop: "15px"
          };
  
          return (
             &lt;div className="row" id="errors" style={divStyle}&gt;
                  {this.state.errors.map((e) =&gt; &lt;ErrorMessage key={e.id} error={e} /&gt;)}
             &lt;/div&gt;
              );
      }
  
      _onModelUpdate() {
          this.setState(this._buildState());
      }
  
      _buildState() {
          return {
              errors: ErrorModel.getErrors()
          };
      }
  }
  
  interface ErrorContainerState {
      errors: AppError[];
  }
  </code></pre>
  
  <p>This compiles without error. However, at runtime I get the error: <code>Uncaught (in promise) TypeError: Cannot read property 'error' of undefined(…)</code>. The error is pointing to the line in my stateless function:
  <code>&lt;div className="col-lg-12" id={this.props.error.id}&gt;</code></p>
  
  <p>The full stack trace is below.</p>
  
  <p>This all worked perfectly fine as a normal component. </p>
  
  <p>Version information: Typescript 1.8.7, react 0.14.7</p>
  
  <p>My <code>react.d.ts</code> is installed via <a href="https://github.com/typings/typings" rel="nofollow">typings</a> and it appears to be the latest.</p>
  
  <p>The full TypeError stack trace:</p>
  
  <blockquote>
    <p>Uncaught (in promise) TypeError: Cannot read property 'error' of
    undefined(…)ErrorMessage @<br>
    error.message.tsx:6ReactCompositeComponentMixin.mountComponent @<br>
    ReactCompositeComponent.js:148wrapper @
    ReactPerf.js:66ReactReconciler.mountComponent @
    ReactReconciler.js:37ReactMultiChild.Mixin._mountChildByNameAtIndex @
    ReactMultiChild.js:474ReactMultiChild.Mixin._updateChildren @
    ReactMultiChild.js:378ReactMultiChild.Mixin.updateChildren @
    ReactMultiChild.js:326ReactDOMComponent.Mixin._updateDOMChildren @
    ReactDOMComponent.js:871ReactDOMComponent.Mixin.updateComponent @
    ReactDOMComponent.js:700ReactDOMComponent.Mixin.receiveComponent @
    ReactDOMComponent.js:645ReactReconciler.receiveComponent @
    ReactReconciler.js:87ReactCompositeComponentMixin._updateRenderedComponent
    @
    ReactCompositeComponent.js:562ReactCompositeComponentMixin._performComponentUpdate
    @
    ReactCompositeComponent.js:544ReactCompositeComponentMixin.updateComponent
    @ ReactCompositeComponent.js:473wrapper @
    ReactPerf.js:66ReactCompositeComponentMixin.performUpdateIfNecessary @
    ReactCompositeComponent.js:421ReactReconciler.performUpdateIfNecessary
    @ ReactReconciler.js:102runBatchedUpdates @
    ReactUpdates.js:129Mixin.perform @ Transaction.js:136Mixin.perform @
    Transaction.js:136assign.perform @
    ReactUpdates.js:86flushBatchedUpdates @ ReactUpdates.js:147wrapper @
    ReactPerf.js:66Mixin.closeAll @ Transaction.js:202Mixin.perform @
    Transaction.js:149ReactDefaultBatchingStrategy.batchedUpdates @
    ReactDefaultBatchingStrategy.js:62enqueueUpdate @
    ReactUpdates.js:176enqueueUpdate @
    ReactUpdateQueue.js:24ReactUpdateQueue.enqueueSetState @
    ReactUpdateQueue.js:190ReactComponent.setState @
    ReactComponent.js:65ErrorContainer._onModelUpdate @
    error.container.tsx:32(anonymous function) @
    observable-factory.ts:21arrayEach @ lodash.js:483forEach @
    lodash.js:7827notifyAll @ observable-factory.ts:21setErrors @
    error.model.ts:38report @ error.model.ts:15report @
    error.service.ts:5_handleError @ session.service.ts:34</p>
  </blockquote>