calling pause from parent container

[PradhumnSingh]

Hi, is there any way to call pause function from parent container?

[sammdec]

Yeah I would also love to know how to do this as well

[malinantonsson]

Hey, You can create a ref on the parent container const timerRef = useRef(null);

<ReactTimer
  onPause={onStop}
  ref={timerRef} />

You'll then have access to all the functions, ie timerRef.current.pause();

[tigersze]

@malinantonsson would you mind explaining more? i do not know how to do this.

Hey, You can create a ref on the parent container const timerRef = useRef(null);

<ReactTimer
  onPause={onStop}
  ref={timerRef} />

You'll then have access to all the functions, ie timerRef.current.pause();

[malinantonsson]

@tigersze ok, so you would do something like this:

import React, { useRef } from "react";
import ReactTimer from "react-compound-timer";

function YourComponent() {
   const timerRef = useRef(null);

   const onStop =() => {
    timerRef.current.stop();
   };
   
    return ( <ReactTimer
        onStop={onStop}
        ref={timerRef} />
    )
}

You can read more about refs https://reactjs.org/docs/refs-and-the-dom.html Basically you create a reference to the Timer component and with that reference, you can access all the functions

[tigersze]

@malinantonsson Thank you very much. In fact, what i want to do is to call the start of the timer from another function (in other file, not from the parent). Is the method similar to yours?

[tigersze]

Also one more question. I am using the class but not function for my component. It do not allow me to put const inside the class. I don't know whether it is the problem from vscode.

[malinantonsson]

@tigersze yes, it should be start (see the main docs for this library for all the functions). In your case, you'd probably have to set the ref in the parent component and pass it down to both the children (the timer function & the other function). I recommend you read this https://reactjs.org/docs/composition-vs-inheritance.html as your issue is more about how to structure react components rather than an issue with this specific library.

Also, this link https://reactjs.org/docs/components-and-props.html#function-and-class-components will help you understand the difference between class and functional components :)

[tigersze]

@malinantonsson Thanks. I have successfully created the reference in my time component (a child class). Now I want to call the class function, i.e. onStop in your example, in other functions. I know it is not related to this library problem. I have searched in the internet to your something like new class().onStop. However, it is no working.

@tigersze ok, so you would do something like this:

import React, { useRef } from "react";
import ReactTimer from "react-compound-timer";

function YourComponent() {
   const timerRef = useRef(null);

   const onStop =() => {
    timerRef.current.stop();
   };
   
    return ( <ReactTimer
        onStop={onStop}
        ref={timerRef} />
    )
}

You can read more about refs https://reactjs.org/docs/refs-and-the-dom.html Basically you create a reference to the Timer component and with that reference, you can access all the functions

[malinantonsson]

@tigersze I'm not sure I can help you with this, but if you set up a code pen or something I can take a look. But basically you need to think about how you structure your react components and pass your functions down as props.

[tigersze]

@samjbmason sure. The time.js (I have created the reference and test with the start button and it works) https://codepen.io/tiger-tiger-sze/pen/YzwKMwy The Event.js https://codepen.io/tiger-tiger-sze/pen/VweZNeL?editors=0010 I want to call the from the startClick function from Time in contractEventNotifier function. In fact, This is a blockchain app. You can just ignore those code. The app works fine and I can provide you the whole app if you want.

[tigersze]

The main problem is that i will do the blockchain transaction and start the timer. I don't know how to write the code. I just know that I need to call it in the Event.js

[tigersze]

@malinantonsson if you want the full code, you can give me your email and i can send you through email.

[malinantonsson]

@tigersze I had a look and I don't think I can help you with this, sorry, I've never used drizzle. I would try to ask the question in the repo for drizzle instead (or on StackOverflow).