TypeScript 1.8 - Why does my React Stateless Function component throw a TypeError at runtime?

Question

I am attempting to create a React Stateless Function component as described in the TypeScript 1.8 release notes. This compiles without error but throws a TypeError at runtime. Why?

I have an interface

interface AppError {
  id: string;
  message: string;
}

My component looks like this: import * as React from "react";

import { AppError } from "../error.interface";

const ErrorMessage = (props: {key: string, error: AppError}) => (
  <div className="col-lg-12" id={this.props.error.id}>
    <h2 className="page-header"><small>{this.props.error.message}</small>  </h2>
  </div>
);

export default ErrorMessage;

It is used from another component like this:

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<{}, ErrorContainerState> {

    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 (
           <div className="row" id="errors" style={divStyle}>
                {this.state.errors.map((e) => <ErrorMessage key={e.id} error={e} />)}
           </div>
            );
    }

    _onModelUpdate() {
        this.setState(this._buildState());
    }

    _buildState() {
        return {
            errors: ErrorModel.getErrors()
        };
    }
}

interface ErrorContainerState {
    errors: AppError[];
}

This compiles without error. However, at runtime I get the error: Uncaught (in promise) TypeError: Cannot read property 'error' of undefined(…). The error is pointing to the line in my stateless function: <div className="col-lg-12" id={this.props.error.id}>

The full stack trace is below.

This all worked perfectly fine as a normal component.

Version information: Typescript 1.8.7, react 0.14.7

My react.d.ts is installed via typings and it appears to be the latest.

The full TypeError stack trace:

Uncaught (in promise) TypeError: Cannot read property 'error' of undefined(…)ErrorMessage @
error.message.tsx:6ReactCompositeComponentMixin.mountComponent @
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

Answer 1

Stateless components don't have this.

Change this line: <h2 className="page-header"><small>{this.props.error.message}</small> </h2>

to

<h2 className="page-header"><small>{props.error.message}</small> </h2>