Convert to functional component

web-chat/src/MessageInput.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, KeyboardEvent } from 'react';
+import React, { ChangeEvent, KeyboardEvent, useState } from 'react';
 import { Button, Grid, TextField } from '@material-ui/core';
 
 interface Props {
@@ -6,58 +6,46 @@ interface Props {
   sendMessage: () => void;
 }
 
-interface State {
+export default function MessageInput(props: Props) {
-  inputText: string;
+    const [inputText, setInputText] = useState<string>('')
-}
 
-export default class MessageInput extends React.Component<Props, State> {
+  const sendMessage = () => {
-  constructor(props: Props) {
+    props.sendMessage()
-    super(props);
+    setInputText('')
-
-    this.state = {
-      inputText: ''
-    };
   }
 
-  messageHandler(event: ChangeEvent<HTMLInputElement>) {
+  const messageHandler = (event: ChangeEvent<HTMLInputElement>) => {
-    this.setState({inputText: event.target.value})
+    setInputText(event.target.value)
-    this.props.messageHandler(event.target.value);
+    props.messageHandler(event.target.value);
-  }
+  };
 
-  keyPressHandler(event: KeyboardEvent<HTMLInputElement>) {
+  const keyPressHandler = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
-      this.sendMessage()
+      sendMessage()
     }
   }
 
-  sendMessage() {
-    this.props.sendMessage()
-    this.setState({inputText: ''})
-  }
-
-  render() {
     return (
       <Grid container spacing={2} direction='row' alignItems='center'>
         <Grid item xs={11}>
           <TextField variant='outlined'
                      label='Send a message'
-                     value={this.state.inputText}
+                     value={inputText}
                      fullWidth
                      style={{ margin: 8 }}
                      margin="normal"
                      InputLabelProps={{
                        shrink: true,
                      }}
-                     onChange={this.messageHandler.bind(this)}
+                     onChange={messageHandler}
-                     onKeyPress={this.keyPressHandler.bind(this)}
+                     onKeyPress={keyPressHandler}
           />
         </Grid>
         <Grid item xs={1}>
-          <Button variant="contained" color="primary" size="large" onClick={this.sendMessage.bind(this)}>
+          <Button variant="contained" color="primary" size="large" onClick={sendMessage}>
             Send
           </Button>
         </Grid>
       </Grid>
     );
-  }
 }