Socket.io emitting undefined variable React - html

Question

I've currently got a very simple app that sends and receives data to a server via a websocket connection. Essentially, the app contains two text boxes and each time a user clicks on either of the textboxes to focus or click away, a notification is sent to the server and then the latter broadcasts that message to all connected instances.
This is my code below:
App.js (client)
import React, { useState, useEffect } from 'react'
import io from 'socket.io-client'
import TextField from '#material-ui/core/TextField'
import './App.css'
import 'carbon-components/css/carbon-components.min.css';
import { TextArea } from 'carbon-components-react';
const socket = io.connect('http://localhost:4000')
function App() {
const [myUser, setMyUser] = useState(null)
const handleButtonClick = (e) => {
e.preventDefault();
setMyUser(e.target.value)
}
useEffect(() => {
socket.on("message", ({ user, id, focus }) => {
console.log(user, "clicked on", id, "with focus", focus)
})
}, [])
function setFocusTrue(id) {
const focus = true
console.log("emitting: ", myUser, id, focus)
socket.emit('message', { myUser, id, focus })
}
function setFocusFalse(id) {
const focus = false
console.log("emitting: ", myUser, id, focus)
socket.emit('message', { myUser, id, focus })
}
const Main = () => {
return (
<div>
<h1>Hello {myUser}</h1>
<TextArea
cols={50}
helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
id="text1"
invalidText="Invalid error message."
labelText="Text area label"
placeholder="Placeholder text"
rows={4}
onFocus={() => setFocusTrue('text1')}
onBlur={() => setFocusFalse('text1')}
/>
<TextArea
cols={50}
helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
id="text2"
invalidText="Invalid error message."
labelText="Text area label"
placeholder="Placeholder text"
rows={4}
onFocus={() => setFocusTrue('text2')}
onBlur={() => setFocusFalse('text2')}
/>
</div>
)
}
return (
<div>
{myUser === null ?
[
<div>
<button onClick={handleButtonClick} value="user1">User 1</button>
<button onClick={handleButtonClick} value="user2">User 2</button>
</div>
]
: <Main />
}
</div>
)
}
export default App
index.js (server)
const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
io.on('connection', socket => {
socket.on('message', ({ user, id, focus }) => {
console.log('received user', user, 'id', id, 'focus', focus)
io.emit('message', { user, id, focus })
})
})
http.listen(4000, function() {
console.log('listening on port 4000')
})
One thing to note is that I'm testing this with two different users (running on two incognito browsers), hence the conditional rendering for each user. For this example, when either user clicks on or away from a textbox, I can see that the textbox id and focus are both valid, but for some reason, the user is undefined. I can see that the instance emits the variables as expected, but they are not being received in the server correctly.
In this particular case, user 1 clicks on the first textbox (thus rendering the focus to true). Each of the variables to emit to the server are set (as can be seen by the console log). The server receives the focus and id variables, but for an odd reason, the user is undefined, even though it exists. Finally, the broadcasted message is sent to both instances but as mentioned, id and focus exist, but user is undefined. See below screenshots.
Client side
Server side console

Answer 1

Instead of emitting the object like socket.emit('message', { myUser, id, focus }), I instead provided the user object as such socket.emit('message', { user: myUser, id, focus }) which seemed to work fine.