Change chatroom input field to be controlled component and update local state. Change chatRoom.tsx to ChatRoom.tsx

Author: johnwage

app/src/components/bottom/BottomTabs.tsx

@@ -8,7 +8,7 @@ import CustomizationPanel from '../../containers/CustomizationPanel';
 import CreationPanel from './CreationPanel';
 import ContextManager from '../ContextAPIManager/ContextManager';
 import StateManager from '../StateManagement/StateManagement';
-import Chatroom from './chatRoom';
+import Chatroom from './ChatRoom';
 import Box from '@mui/material/Box';
 import Tree from '../../tree/TreeChart';
 import FormControl from '@mui/material/FormControl';

app/src/components/bottom/chatRoom.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
+import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../redux/store';
 import { emitEvent } from '../../helperFunctions/socket';
 
 const Chatroom = (props): JSX.Element => {
   const userName = useSelector((store: RootState) => store.roomSlice.userName);
   const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
-
   const messages = useSelector((store: RootState) => store.roomSlice.messages);
 
+  const [inputContent, setInputContent] = useState('');
+
   const wrapperStyles = {
     border: `2px solid #f2fbf8`,
     borderRadius: '8px',
@@ -49,13 +51,12 @@ const Chatroom = (props): JSX.Element => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    const messageInput = document.getElementById(
-      'message-input'
-    ) as HTMLInputElement;
-    const message = messageInput.value.trim();
-    if (message !== '') {
-      emitEvent('send-chat-message', roomCode, { userName, message });
-      messageInput.value = '';
+    if (inputContent !== '') {
+      emitEvent('send-chat-message', roomCode, {
+        userName,
+        message: inputContent
+      });
+      setInputContent('');
     }
   };
 
@@ -107,7 +108,13 @@ const Chatroom = (props): JSX.Element => {
         style={inputContainerStyles}
         onSubmit={handleSubmit}
       >
-        <input type="text" id="message-input" style={inputStyles} />
+        <input
+          type="text"
+          id="message-input"
+          onChange={(e) => setInputContent(e.target.value)}
+          value={inputContent}
+          style={inputStyles}
+        />
         <button type="submit" id="send-button" style={buttonStyles}>
           Send
         </button>