pughpugh / react-countdown-clock

HTML5 canvas countdown clock React component
ISC License
187 stars 83 forks source link

When use 2 countdowns, when first finished, it stops the second too. #41

Open yan87 opened 7 years ago

yan87 commented 7 years ago

Hi,

I am new with React, I try use 2 countdown clocks, the problem when the first finished (onComplete), the second one stops. How can I run multiple react-countdown-clock?

pughpugh commented 6 years ago

Sorry for the delayed response. If this is still a problem, please post an example and I will take a look.

zchauhan commented 6 years ago

@pughpugh This is still an issue.

pughpugh commented 6 years ago

OK thanks @zchauhan , I will take a look.

zchauhan commented 6 years ago

@pughpugh

The issue is with below code

_stopTimer: ->
    for timeout in @_timeoutIds
      clearTimeout timeout
pughpugh commented 6 years ago

Yup. Timeout IDs need to be stored in state, not on the component definition. They are currently bleeding across instances. I think this is the cause of a number of problems at the moment.

zchauhan commented 6 years ago

Yes, You are right. I am wondering how props can be shared ? May be due to passByRefference nature for object/array in javascript ?

dannykoshy commented 6 years ago

Any update on this?

Simek commented 6 years ago

Bump! Any news or workaround?

dannykoshy commented 6 years ago

Hey thanks,

I had solved it. Cheers!

On Mon, Jun 11, 2018 at 5:12 PM Bartosz Kaszubowski < notifications@github.com> wrote:

I've manage to implement little, dirty w/o in which I've override start/stop methods and lift timeoutIds to component wrapper state:

export default class Counter extends ReactCountdownClock { constructor(props) { super(props); this.state = { tids: [] };

  this._stopTimer = () => {
      for (let timeout in this.state.tids) {
          clearTimeout(timeout);
      }
  };

  this._startTimer = () => {
      this.setState({ tids: setTimeout(this._tick(), 200)});
  };

} }

It's not pretty or solid code but works.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/pughpugh/react-countdown-clock/issues/41#issuecomment-396193176, or mute the thread https://github.com/notifications/unsubscribe-auth/AXaLR7-DWw4sbrNMMsNdRHzunsd4rjEaks5t7kKBgaJpZM4QZvox .

obrejla commented 5 years ago

Hi all,

also bumped into this... It's really a blocker, is the fix planned?

Thanks a lot.