ChatContainer skeleton

Our chat view will have two main sections:

• A message display where all chats are listed
• A chat box for the user to type in a new message

We can start by adding the appropriate div tags:

render() {
  return (
    <div id="ChatContainer">
      <Header>
        <button className="red" onClick={this.handleLogout}>
          Logout
        </button>
      </Header>
<div id="message-container">

       </div>
       <div id="chat-input">

       </div>
     </div>
   );
}

Note

Reminder to ensure that your IDs and classNames are the same as mine, lest your CSS be different (or even worse).

We'll fill in the input box first. Inside div#chat-input, let's place a textarea, with a placeholder of "Add your message…”:

<textarea placeholder="Add your message..." />

We will configure it to allow the user to press Enter to send a message, but it's better to also have a Send button. Below the textarea, add a button, and inside...