render.js

  render() {
    return (
      <div
        style={{
          display: 'flex',
          height: '100vh',
        }}
      >
        <div
          style={{
            width: '30%',
            backgroundColor: 'tomato',
          }}
        >
          <h2>Who's Online</h2>
        </div>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
          }}
        >
          <h2>Chat</h2>
          <div
            style={{
              flex: 1,
            }}
          >
            <MessageList messages={this.state.messages} />
          </div>
          <TypingIndicator usersWhoAreTyping={this.state.usersWhoAreTyping} />
          <SendMessageForm
            onSubmit={this.sendMessage}
            onChange={this.sendTypingEvent}
          />
        </div>
      </div>
    )
  }