David Sykes David Sykes - 3 months ago 14
React JSX Question

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

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

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>