Cannot read property 'emit' of undefined error using React/Socket.IO
<p>I'm trying to build a basic chat app using React and Socket.Io based on the React tutorial <a href="https://facebook.github.io/react/docs/tutorial.html" rel="nofollow">https://facebook.github.io/react/docs/tutorial.html</a> but keep getting an error "Cannot read property 'emit' of undefined". It's probably something trivial that I overlooked but I can't figure it out.</p>

<p>The function that triggers the error is: </p>

<pre><code>    handleSubmit: function (e) {
    e.preventDefault();
    var author = this.state.author.trim();
    var text = this.state.text.trim();
    if (!text || !author) {
        return;
    }
    this.props.onCommentSubmit({ author: author, text: text });
    this.setState({ author: '', text: '' });
    this.socket.emit('message', comment);
},
</code></pre>

<p>The full code is </p>

<pre><code>import React, { Component, PropTypes } from 'react';
import ReactDom from 'react-dom';
import io from 'socket.io-client'

/********************************************************************************************************/

var CommentBox = React.createClass({

    getInitialState: function () {
        return { data: [] };
    },

    handleCommentSubmit: function (comment) {
        this.setState({ data: [comment, ...this.state.data] });
    },

    componentDidMount: function (data) {
        this.socket = io.connect();
        this.socket.on('message', function (comment) {
            this.setState({ data: [comment, ...this.state.data] });
        });
    },

    render: function () {
        return (
            &lt;div className="commentBox"&gt;
                &lt;h1&gt;Comments&lt;/h1&gt;
                &lt;CommentList data={this.state.data} /&gt;
                &lt;CommentForm onCommentSubmit={this.handleCommentSubmit} /&gt;
            &lt;/div&gt;
        );
    }
});

/********************************************************************************************************/

var CommentList = React.createClass({
    render: function () {
        var commentNodes = this.props.data.map(function (comment) {
            return (
                &lt;Comment author={comment.author} key={comment.id}&gt;{comment.text}&lt;/Comment&gt;
            );
        });
        return (
            &lt;div className="commentList"&gt;
                {commentNodes}
            &lt;/div&gt;
        );
    }
});

/********************************************************************************************************/

var CommentForm = React.createClass({

    getInitialState: function () {
        return { author: '', text: '' };
    },

    handleAuthorChange: function (e) {
        this.setState({ author: e.target.value });
    },

    handleTextChange: function (e) {
        this.setState({ text: e.target.value });
    },

    handleSubmit: function (e) {
        e.preventDefault();
        var author = this.state.author.trim();
        var text = this.state.text.trim();
        if (!text || !author) {
            return;
        }
        this.props.onCommentSubmit({ author: author, text: text });
        this.setState({ author: '', text: '' });
        this.socket.emit('message', comment);
    },

    render: function () {
        return (
            &lt;div&gt;
                &lt;form className='commentForm' onSubmit={this.handleSubmit}&gt;
                    &lt;input type='text' placeholder='Name' value={this.state.author} onChange={this.handleAuthorChange} /&gt;
                    &lt;input type='text' placeholder='Enter Message' value={this.state.text} onChange={this.handleTextChange} /&gt;
                    &lt;input type='submit' value='Post' /&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        );
    }
});

/********************************************************************************************************/

var Comment = React.createClass({
    render: function () {
        return (
            &lt;div className="comment"&gt;
                &lt;h2 className="commentAuthor"&gt;
                    {this.props.author}
                &lt;/h2&gt;
                {this.props.children}
            &lt;/div&gt;
        );
    }
});

/********************************************************************************************************/
ReactDom.render(
    &lt;CommentBox /&gt;,
    document.getElementById('container')
);
</code></pre>