Subscriptions not loading in meteor react

I have a chatbox component which uses a conditional statement in render.

import React, { Component } from 'react';
import { render } from 'react-dom';

import ChatHeader from './ChatHeader.jsx';
import Messages from './Messages.jsx';
import ChatFooter from './ChatFooter.jsx';
import Conversations from './Conversations.jsx';

export default class ChatBox extends Component {
constructor(props) {
    super(props);
  }

 render () {

    if (!this.props.conversation) {
       return (<div> Loading Chatbox</div>);
    }

    console.log(this.props.conversation);
    return (
      <div className="chat-container">
        <ChatHeader name="Manu" />
        <Messages />

        <ChatFooter
          sendMessage={this.sendMessage}
          conversation={this.props.conversation}
        />
      </div>
    );
  }
  // }
}

When the

if (!this.props.conversation) {
       return (<div> Loading Chatbox</div>);
    }

part is not commented out, no subscriptions work in the Messages component. [The onStop callback gets called automatically].
But when I comment out said part, subscriptions work just fine. Why is this?

Here is the Messages component.

import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';

import Message from './Message.jsx';

export default class Messages extends TrackerReact(Component) {
  constructor (props) {
    super(props);
    console.log('constructor called');
    this.state = {
      subscription: {
        messages: Meteor.subscribe('allMessagesForConversation', {
          onReady: function () {
            console.log('ready');
          },

          onStop: function () {
            console.log('onError', arguments);
          },
        }),
      },
      allStudents: Meteor.subscribe('allStudents'),
    };
  }

  messages() {
    return Meteor.messages.find({
      conversationId: this.props.conversationId,
    }).fetch();
  }

  // componentWillUnmount() {
  //   this.state.subscription.messages.stop();
  // }

  render () {
    console.log(this.state.subscription.messages);
    var inlineStyles = {
      height: '300px',
      overflowY: 'scroll',
    };
    // Loop through the list of chats and create array of Row components
    console.log(this.props.conversationId);
    var Messages = this.messages().map(function (message) {
      return (
        <Message key={message._id}
          username={message.user().username}
          // time={message.timestamp()}
          message={message.body}
        />
      );
    });

    return (
      <div style={inlineStyles}>
        {Messages}
        assdfdsd
      </div>
    );
  }
}

I can verify that when I render Messages component outside the Chatbox, everything works just fine too. Kindly help!