在ReactJS中通过状态添加JSX元素

Question

我正在制作一个聊天记录，显示userA和userB聊天对话。

我的初始状态：

var initialState = {
  message: '', //my input message
  receivedMessage: null //all old messages
}

点击发送按钮时的处理功能：

handleSend = () => {
    var message = () => {
        return (<p className="my-text">{this.state.yourName + ": " + this.state.message}</p>);
    };
    var oldMessages = this.state.receivedMessage;
    this.setState({receivedMessage: oldMessages + message, message: ''});
    dataChannel.send(message); //WEBRTC data channel
}

我处理收到的消息功能：

receiveChannel.onmessage = (event) => {
                var oldMessages = this.state.receivedMessage;
                var userB = this.state.callToUser;
                var message = () => {
                    return (<p className="receive-text">{userB}: event.data</p>);
                }
                this.setState({
                    receivedMessage: oldMessages + message
                })
        };

存储会话的我的JSX元素：

<div className="panel-body text-left">{this.state.receivedMessage}</div>

但这不起作用，我没有得到我想要的显示器。任何人都可以告诉我我哪里做错了并给我一个解决方案吗？任何帮助表示赞赏！