I'm building a DApp in React and really struggling to handle events well. My understanding is that listening for Events is the best way to update my react UI. I'm looking for links, tutorials, example projects, or best practices on how to handle events effectively.

My main problem is that MetaMask seems to keep duplicating logs that are emitted by particular Events. This makes it difficult to determine when to have my UI respond. Right now I'm tracking transaction hashes of each log and only responding to non-duplicates. Is this normal?

  componentDidMount() {
    .then(results => {
        web3: results.web3

      //Set up event event logging
      const contract = require('truffle-contract');
      const attendanceRewarder = contract(AttendanceData);
      attendanceRewarder.deployed().then((instance) => {
        let contributedEvent = instance.Contributed();
        let winnerEvent = instance.Winner();
        let validatedEvent = instance.Validated();
        let nameUpdatedEvent = instance.NameUpdated();
        let winningsCollected = instance.WinningsCollected();
        contributedEvent.watch( (err, response) => {
        winnerEvent.watch( (err, response) => {
        validatedEvent.watch( (err, response) => {
        nameUpdatedEvent.watch( (err, response) => {
        winningsCollected.watch( (err, response) => {
      return this.instantiateContract();
    .catch(() => {
      console.log('Error finding web3.');

    //Poll for any metamask account switches
    setInterval(() => {
      let account = this.state.loggedInAddress;
      if (this.state.web3.eth.accounts[0] !== account) {
        this.setState({loggedInAddress: this.state.web3.eth.accounts[0]});
        let hasContributed = this.state.attendeeList.includes(this.state.loggedInAddress);
        this.setState({hasContributed: hasContributed});
    }, 500);

Well, without your JS code to see what you do, it's hard to tell what what is wrong. So, depending on the version of web3 you use, the code will be different. I suppose you want to listen to specific events, so here's how you have to do it

my_contract = web3.eth.contract(abi);
contract_instance= my_contract.at(address_contract);

my_nice_event = contract_instance.NiceEvent();

contribution_event.watch(function(error, result) {
    if (!error) {

Basically, it will listen and catch the type NiceEvent of Events emitted by your contract.

This is using the version 1.0 of web3, you have its documenation here. If you use 0.2x.x, go here.

  • Thanks! I edited my original response with my code. Notice I put my code block in the componentDidMount() callback. Right now, I am getting only a single event logged to my console when I load up the page. All subsequent contract events are NOT being logged to the console as I would expect. Do you see any issues? – Ryan Miller Mar 26 '18 at 1:15
  • To clarify: There is strangely an event that gets printed to my console as the page is loaded (assuming there has been at least one event fired in a previous session). ...No further contract txns are triggering event logs to be written to my console (weird!). The txns themselves are succeeding and there are no errors shown. Wondering if this is some bizarre ganache-cli behavior? – Ryan Miller Mar 26 '18 at 1:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.