diff --git a/src/components/Chat/Chat.js b/src/components/Chat/Chat.js
new file mode 100644
index 0000000..b0414ba
--- /dev/null
+++ b/src/components/Chat/Chat.js
@@ -0,0 +1,53 @@
+import React, { Component } from "react";
+import Message from "../Message";
+import "./Chat.css";
+
+export default class Chat extends Component {
+ state = {
+ messages: [],
+ messageInput: ""
+ };
+
+ componentDidUpdate() {
+ let chatScroll = document.querySelector('.message-list');
+ chatScroll.scrollTop = chatScroll.scrollHeight;
+ }
+
+ render() {
+ const messages = this.state.messages.map((message, index) =>
+ );
+
+ return
;
+ }
+
+ changeInputMessage = event => {
+ this.setState({
+ messageInput: event.target.value
+ });
+ };
+
+ sendMessageOnEnter = event => {
+ if (event.key !== "Enter" || !this.state.messageInput) {
+ return;
+ }
+
+ this.setState((prevState, props) => ({
+ messages: [...prevState.messages, { "text": prevState.messageInput }],
+ messageInput: ""
+ }));
+ };
+}
diff --git a/src/components/Chat/index.js b/src/components/Chat/index.js
new file mode 100644
index 0000000..c21b661
--- /dev/null
+++ b/src/components/Chat/index.js
@@ -0,0 +1 @@
+export { default } from './Chat'
\ No newline at end of file
diff --git a/src/components/Message/Message.js b/src/components/Message/Message.js
new file mode 100644
index 0000000..47ee17e
--- /dev/null
+++ b/src/components/Message/Message.js
@@ -0,0 +1,6 @@
+import React from 'react'
+import './Message.css'
+
+export default ({text}) => {
+ return {text}
+}