gistfile1.jsx

export function Chat() {  
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState("");
  
  return (
    <div className="chat">
      <div className="messages">
        {messages.map((message, idx) => {
          return <div
            className={`message ${message.name === name ? 'left' : 'right'}`}
            key={idx}>
            {message.content}
          </div>
        })}
      </div>
      <div className="submission-form">
        <input
          placeholder="Type your message here!"
          type="text"
          value={message}
          onChange={e => setMessage(e.target.value)} />
        <button>Send</button>
      </div>
    </div>
  );
}