[How can I maintain state and “this” with react component functions]

Currently, when socket.io emits a 'gmessage' from my server, and the socket in my component catches it, my entire state is replaced.

 

So the current flow is like this:

 

I emit a message from the component, it goes to my server, then to the watson API. The API sends a response to my server, and the server sends that to the component.

 

So that first message creates the connection to socket.io, then the second socket.io event is caught on the same connection firstbankcard.

 

Is there a better way to set up the connection to socket.io and handle both the emit and the "on gmessage" parts of this? Thank you for any tips in advance. I'm still new to react, so anything you see that I should do differently is helpful!!

 

...

import {Launcher} from 'react-chat-window'

import io from 'socket.io-client';

 

import { getUser } from '../actions/userActions';

 

class Workshop extends Component {

 

constructor() {

super();

this.state = {

messageList: []

};

}

 

_onMessageWasSent(message) {

this.setState({

messageList: [message, ...this.state.messageList]

})

 

var socket = io.connect('http://localhost:5000');

 

socket.emit('message', { message });

 

var myThis = this

var myState = this.state

 

socket.on('gmesssage', function (data) {

console.log(data);

myThis.setState({

messageList: [{

author: 'them',

type: 'text',

data: data

}, ...myState.messageList]

})

})

}

 

render() {

return (

<Grid container className="DashboardPage" justify="center">

<Grid item xs={12}>

<div>Welcome to your Workshop</div>

<TeamsTaskLists />

</Grid>

 

<Launcher

agentProfile={{

teamName: 'Geppetto',

imageUrl: 'https://geppetto.ai/wp-content/uploads/2019/03/geppetto-chat-avi.png'

}}

onMessageWasSent={this._onMessageWasSent.bind(this)}

messageList={this.state.messageList}

showEmoji

/>

 

</Grid>

);

}

}

 

const mapStatetoProps = state => ({

user: state.user

});

 

export default connect(

mapStatetoProps,

{ getUser }

)(Workshop);

 

 

Have any one found any solution regarding my question?