Web3js events and their callback functions are not aware of component state?

Question

I have problem with web3js 1.2.9
Events triggering works fine and data is alright but I cannot figure out how to use component state in this functions that are triggered by event.
I cannot access state of that component where watch event is initialized.
this.state.contract.events.NewUserCreated()
             .on("connected",function (subscriptionId) {console.log("SubscriptionId  ",subscriptionId)})
             .on("data",function (event) {
                 console.log("Event ",event)
                 console.log("Current users")
                 console.log(this.state.users)
        
             })

Morten · Accepted Answer

The function has its own this binding, so you cannot access this.state on the parent. To solve this, you can either:

Use an arrow function, since they don't provide their own this binding:
  .on("data", (event) => {
    console.log(this.state.users);
  })

Bind the function to the parent's this object:
function handleData (event) {
  console.log(this.state.users);
}

//...
  .on("data", handleData.bind(this));

You can read more about this in JavaScript on the MDN docs here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this.

Web3js events and their callback functions are not aware of component state?

One Answer

Add your own answers!

Ask a Question