Makes lines a functional component

web-chat/src/Room.tsx

@@ -3,7 +3,7 @@ import {
   Grid,
   List,
   ListItem,
-  ListItemText, Paper
+  ListItemText
 } from '@material-ui/core';
 import React from 'react';
 import MessageInput from './MessageInput';
@@ -37,12 +37,12 @@ export default class Room extends React.Component<Props, State> {
         <Grid item xs={12}>
           <Box height={1080} maxHeight={1080}
                style={{ flex: 1, maxHeight: '100%', overflow: 'scroll' }}>
-            {this.renderLines()}
+            <Lines messages={this.props.lines} />
           </Box>
         </Grid>
 
         <Grid item xs={12}>
-          <Grid container spacing={2} direction="row" alignItems="center">
+          <Grid container spacing={2} direction='row' alignItems='center'>
             <Grid item xs={11}>
               <MessageInput messageHandler={this.messageHandler.bind(this)} />
             </Grid>
@@ -55,12 +55,16 @@ export default class Room extends React.Component<Props, State> {
       </Grid>
     );
   }
+}
 
-  // TODO: Make it own component
-  renderLines() {
+interface LinesProps {
+  messages: string[]
+}
+
+const Lines = (props: LinesProps) => {
   const renderedLines = [];
 
-    for (const line of this.props.lines) {
+  for (const line of props.messages) {
     renderedLines.push(<ListItem>
       <ListItemText
         primary={line}
@@ -73,5 +77,4 @@ export default class Room extends React.Component<Props, State> {
       {renderedLines}
     </List>
   );
-  }
-}
+};