App holds the messages

web-chat/src/App.tsx

@@ -2,14 +2,31 @@ import React from 'react';
 import './App.css';
 import Log from './Log';
 
-function App() {
+interface Props {
-  return (
+}
-    <div className="App">
+
-        <div className="chat-log">
+interface State {
-          <Log />
+  messages: string[]
+}
+
+class App extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      messages: ['Here is a line', 'Here is another line']
+    };
+  }
+
+  render() {
+    return (
+      <div className='App'>
+        <div className='chat-log'>
+          <Log lines={this.state.messages} />
+        </div>
       </div>
-    </div>
+    );
-  );
+  }
 }
 
 export default App;

web-chat/src/Log.tsx

@@ -1,40 +1,31 @@
 import React from 'react';
 
 interface Props {
+  lines: string[]
 }
 
 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()}
+        {this.renderLines(this.props.lines)}
       </div>
     );
   }
 
-  renderLines() {
+  renderLines(lines: string[]) {
 
-    const lines = [];
+    const renderedLines = [];
-    for (const line of this.state.lines) {
+    for (const line of lines) {
-      lines.push(<div className='log-row'>{line}</div>);
+      renderedLines.push(<div className='log-row'>{line}</div>);
     }
 
     return (
       <div>
-        {lines}
+        {renderedLines}
       </div>
     );
   }