Jump to content
IObit Forum
Top Free Driver Updater Tools Best 25 PC Optimization Software Best 22 Antimalware Best 22 Uninstaller Software IObit Coupons & Discount Offers PC Optimizer Mac Boost Advice IObit Coupons A Good Utility Program From IObit IObit Promo Codes IObit Coupon Codes IObit Coupons and Deals FAQs Driver Booster Pro Review

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

Recommended Posts

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() {


this.state = {

messageList: []




_onMessageWasSent(message) {


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



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 />





teamName: 'Geppetto',

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












const mapStatetoProps = state => ({

user: state.user



export default connect(


{ getUser }




Have any one found any solution regarding my question?

Link to comment
Share on other sites

  • 8 months later...

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 => {



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([]);

Link to comment
Share on other sites

  • 1 month later...
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...