title: add JSX element through state in ReactJS
body: <p>I'm making a chat log which will display userA and userB chat conversation.</p>
  
  <p><strong>My initial state:</strong></p>
  
  <pre><code>var initialState = {
    message: '', //my input message
    receivedMessage: null //all old messages
  }
  </code></pre>
  
  <p><strong>My handling function when click <em>send</em> button:</strong></p>
  
  <pre><code>handleSend = () =&gt; {
      var message = () =&gt; {
          return (&lt;p className="my-text"&gt;{this.state.yourName + ": " + this.state.message}&lt;/p&gt;);
      };
      var oldMessages = this.state.receivedMessage;
      this.setState({receivedMessage: oldMessages + message, message: ''});
      dataChannel.send(message); //WEBRTC data channel
  }
  </code></pre>
  
  <p><strong>My handling received message function:</strong></p>
  
  <pre><code>receiveChannel.onmessage = (event) =&gt; {
                  var oldMessages = this.state.receivedMessage;
                  var userB = this.state.callToUser;
                  var message = () =&gt; {
                      return (&lt;p className="receive-text"&gt;{userB}: event.data&lt;/p&gt;);
                  }
                  this.setState({
                      receivedMessage: oldMessages + message
                  })
          };
  </code></pre>
  
  <p><strong>My JSX element which store the conversation:</strong></p>
  
  <pre><code>&lt;div className="panel-body text-left"&gt;{this.state.receivedMessage}&lt;/div&gt;
  </code></pre>
  
  <p>But this didn't work, I don't get the display I want. Can anybody tell me where did I do wrong and give me a solution for this? Any help is appreciated!</p>