Error: Must use destructuring state assignment in react using Websoket - reactjs

Question

I am getting error as "Must use destructuring state assignment" in react
I have routed this code in "Home.jsx"
My code is "MainPage.jsx". In this code I am sending userdetails to server and from server I am fetching hashcode value along with userdetails.
MainPage.jsx:
import React, { Component } from 'react';
export class MainPage extends Component {
constructor(props) {
super(props);
this.state = {
userCredientials: {
type: 'credentials',
name: 'vinay',
email: 'vinay3245#gmail.com',
},
mess: '',
userHashCode: '',
};
}
componentDidMount() {
this.connect();
}
/**
* #function connect
* This function establishes the connect with the websocket and also ensures constant
reconnection if connection closes
*/
connect = () => {
const ws = new WebSocket('ws://127.0.0.1:5678/');
// websocket onopen event listener
ws.onopen = () => {
console.log('connected websocket main component');
console.log(this.state);
ws.send(JSON.stringify(this.state.userCredientials)); //line no 32 -- error -- todo
};
// websocket onclose event listener
ws.onclose = () => {
console.log('closed');
};
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
this.setState({ userHashCode: data.hashCodeOfUser });
if (this.state.userHashCode) { //line no 43 -- error -- todo
this.setState({
mess: `Name: ${data.name} date: ${data.date} HashCode: ${data.hashCodeOfUser} Message: ${data.msg}`,
});
} else {
this.setState({
mess: `Name: ${data.name} Message: ${data.msg}`,
});
}
};
// websocket onerror event listener
ws.onerror = (err) => {
console.error('Socket encountered error: ', err.message, 'Closing socket');
ws.close();
};
};
/**
* utilited by the #function connect to check if the connection is close, if so attempts to
reconnect
*/
check = () => {
const { ws } = this.state;
if (!ws || ws.readyState === WebSocket.CLOSED) this.connect(); // check if websocket
instance is closed, if so call `connect` function.
};
render() {
return (
<div>
<p>{this.state.mess}</p> //line no 72 -- error -- todo
</div>
);
}
}
export default MainPage;
to see error in browser click this link
I have mentioned error in code as "todo"
If any one know please let me know the correct code.

Answer 1

The error means that you can not read this.state.attribute, and must read const { attribute } = this.state instead.
For example, on line 32:
const { userCredientials } = this.state;
ws.send(JSON.stringify(userCredientials));
The error is not a Javascript error per se, but an opinionated one. Javascript can and will compile, but somewhere along your build line that error is triggered. The most common place to write rules like that is in an eslint configuration file.