render() { if (this.state.conversation) { let messagePane = []; if (this.state.messages.length) { this.state.messages.forEach(msg => { messagePane.push(

{msg.sender}:{msg.text}

); }); } return (

{messagePane}

this.setInput(evt)} />
            <button onClick={evt => this.sendInput(evt)}>Chat</button>
          </div>
        </div>
      );
    } else {
      ...
    }
  }
</code></pre>
<p>The events raised by the message input are handled in <code>setInput</code> and <code>sendInput</code>. <code>setInput</code> very simply stores the inputted text in the component state:</p>
<pre><code class="language-javascript">  setInput(evt) {
    this.setState({
      input: evt.target.value
    });
  }
</code></pre>
<p>The button handler, <code>sendInput</code>, takes the text stored in the state and passes it to the Conversation using <code>sendText</code>. It then clears the text in the state and in the textarea preceding it:</p>
<pre><code class="language-javascript">  sendInput(evt) {
    this.state.conversation.sendText(this.state.input).then(() => {
      this.setState({
        input: null
      });
    });
    evt.target.previousSibling.value = '';
  }
</code></pre>
<h2>Chat Away!</h2>
<p>Though it's missing error handling and pays no attention to performance, now you have a very basic chat application. Stripping away the features of a production app reveals how little you need to provide core chat functionality:</p>
<ol>
<li>A User logged in to a Nexmo Application</li>
<li>A Conversation for the User to join</li>
<li>An event handler for received messages</li>
<li>The <code>sendText</code> function to enable chatting</li>
</ol>
<p>Whether you want to create an old school chat room, a pop-up conversation to help confused customers, or anything else, you can build it starting with these elements. You don't need to handle any sockets or polling. And with React, you don't need to do anything to trigger DOM updates. Now you can turn your attention to your UI and the app's robustness.</p>

Vonage API Developer Blog

Ready to start building?