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

[Stella67]

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?

[Lewis-H]

Depending on your application, I think Redux would be overkill for this.

 

I would change to a lambda expression here though to avoid having to save this references:

 

socket.on('gmesssage', data => {

console.log(data);

this.setState({

messageList: [{

author: 'them',

type: 'text',

data: data

}, ...this.messageList]

})

})

You might consider using the new React Hooks also e.g. turn it into a stateless component and use useState:

 

const Workshop = () => {

const [messageList, setMessageList] = useState([]);

[peggmoon]

You shared a useful post and thanks for sharing this to us. peryourhealth is a bill payment system. It is designed to allow you to pay your medical bills with ease. You may also review your account, update insurance information and make payments online www.peryourhealth.com here.

[enoskype]

Test test test