Display lines

web-chat/src/App.tsx

@@ -1,24 +1,13 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Log from './Log';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+        <div className="chat-log">
+          <Log />
+      </div>
     </div>
   );
 }

web-chat/src/Log.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+interface Props {
+}
+
+interface State {
+  lines: string[];
+}
+
+export default class Log extends React.Component<Props, State> {
+  state: State = {
+    lines: [
+      'here',
+      'is',
+      'a',
+      'line'
+    ]
+  };
+
+  render() {
+    return (
+      <div className='log'>
+        {this.renderLines()}
+      </div>
+    );
+  }
+
+  renderLines() {
+
+    const lines = [];
+    for (const line of this.state.lines) {
+      lines.push(<div className='log-row'>{line}</div>);
+    }
+
+    return (
+      <div>
+        {lines}
+      </div>
+    );
+  }
+}

web-chat/src/index.css

@@ -11,3 +11,14 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.log-row {
+  text-align: left;
+  margin-left: 20px;
+}
+
+.log-row:after {
+  clear: both;
+  content: "";
+  display: table;
+}