Что не так с вызовом компонентов в Реакте?

Есть некий класс

import React, { Component } from 'react';
import io from "socket.io-client";

class Chat extends React.Component{

socket = io('localhost:5000');

// socketListening создаеться как обьект
socketListening = this.socket.on('RECEIVE_MESSAGE', function(data){
console.log(Chat) });

info(){console.log(this)

render(){return ();}}

По Итогу что мы имеемиз вызова

socketListening = this.socket.on( console.log(this ) );

мы имеем прямую ссылку на обьект

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)}

а при вызове из другого объекта

 socketListening = this.socket.on(
'RECEIVE_MESSAGE', function(data){ console.log(Chat) });

мы получаем обычное сообщение (без ссылки на объект)

class Chat extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component {
constructor(...args) {
super(...args);
this.state = {
username: '',
message: '',
messages: []
};

вопрос: что это во втором варианте и как правильно обращаться к компонентам(а точнее их свойствам) из дочерних компонентов или прочих мест?????