App.js

function App() {
  
  // ... rest of our code here

  return (
    <div className="app">
      <div className="header">
        <AmplifySignOut />
      </div>
      <div className="container">
        <div className="messages">
          <div className="messages-scroller">
            {messages.map((message) => (
              <div
                key={message.id}
                className={message.author === 'Dave' ? 'message me' : 'message'}>{message.body}</div>
            ))}
          </div>
        </div>
        <div className="chat-bar">
          <form onSubmit={handleSubmit}>
            <input
              type="text"
              name="message"
              placeholder="Type your message here..."
              onChange={handleChange}
              value={messageBody} />
          </form>
        </div>
      </div>
    </div>
  );
}

export default withAuthenticator(App);