What's wrong with calling components in React?

Question

React

There is a class
import React, { Component } from 'react';
import io from "socket.io-client";
class Chat extends React.Component{
socket = io('localhost:5000');
// socketListening is created as a socketListening object
= this.socket.on('RECEIVE_MESSAGE', function(data){
console.log(Chat) });
info(){console.log(this)
render(){
return (
);
}
}
As a result, what we have
from the call socketListening = this.socket.on( console.log(this ) );
we have a direct link to the object: Chat {props: {...}, context: {...}, refs: {...}, updater: {...}, state: {...}, ...}
addMessage: data =>
context: {}
props: {name: "Noname", dispatch: ƒ}
refs: {}
sendMessage: ev => {…}
socket: Socket {io: Manager, nsp: "/", json: Socket, ids: 0 , acks: {…}, …}
socketListening: Socket {io: Manager, nsp: "/", json: Socket, ids: 0, acks: {…}, …}
state: {username: "", message: " ", messages: Array(0)}
..... etc.
and when called from another object socketListening = this.socket.on(
'RECEIVE_MESSAGE', function(data){ console.log(Chat) });
we get a normal message (no object reference)
class Chat extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component {
constructor(...args) {
super(...args);
this.
message: '',
messages: []
};
question: what is it in the second variant and how to correctly access components (or rather their properties) from child components or other places?????

Answer 1

Context or immediately Redax .