Is there any way to set initialTime by a function?

[KongfuMan]

I need to set initialTime to be some value from previous calculation. Can I set that value at constructor?

[an0nEmouse]

Do you need the value of intialTime to be dynamic when your component mounts?

[KongfuMan]

Do you need the value of intialTime to be dynamic when your component mounts? Exactly

[KongfuMan]

Now I am using " Change props dynamically and use HOC" of this https://volkov97.github.io/react-compound-timer/ So I am wondering how to set intialTime when the component mounts. Thank you!

[KongfuMan]

I used setTime in the constructor, but the timer does not update. When the timer starts, it continues from the time I set.

[volkov97]

maybe you should try to call setTime in componentDidMount, not in constructor can you check it?

[KongfuMan]

I just tried, but it doesn't work. This is my code: ` const withTimer = timerProps => WrappedComponent => wrappedComponentProps => ( <Timer {...timerProps}> {timerRenderProps => <WrappedComponent {...wrappedComponentProps} timer={timerRenderProps} />} </Timer> ); class StepTimer extends Component { constructor(props){ super(props); const { setTime } = this.props.timer; setTime(this.props.currentTime); }

componentDidMount(){
    this.props.onRef&&this.props.onRef(this.props.timer.reset);
}

componentDidUpdate(){
    const { start, pause } = this.props.timer;
    if (this.props.dataStreamRequested === streamState.STARTED){
        start();
    }else{
        pause();
    }
}

componentWillUnmount(){
    const { getTime } = this.props.timer;
    this.props.updateTime(getTime());
}

render() {
    return (
        <Text style={{fontSize:20}}>
            <Timer.Minutes initialTime={10000} />:<Timer.Seconds />
        </Text>
    );
}

}

const SessionTimer = withTimer({ initialTime: 0, //how to update this value? startImmediately: false, })(StepTimer);`

I guess it may be caused by the execution order of withTimer and componentDidMount?

[volkov97]

i mean, that you should call this.props.timer. setTime(10000) in componentDidMount why are you calling reset? and Timer.Minutes component has no such property initialTime

[avernikoz]

I had the same problem when I'm trying to set another initla time by property from parent component.

Can you please create a simple example, how I can change my initial time depending on prop from parent component please?

[sondosmustafa]

same problem

[kyds3k]

Same problem here too!

[codebefore]

same problem

[danielm2402]

To change the initial time based on a property, use useTimer

import { useTimer } from 'react-compound-timer'
export default function Timer(props) {
    const {
        value,
        controls: { setTime, reset }
    } = useTimer({ initialTime: 0 })

    useEffect(() => {
        setTime(props.initialTime)
    }, [props.initialTime]);
    return (
        <div>
            <h2>{value.m}</h2>
            <h2>{value.s}</h2>
        </div>
    )
}

[nilayvr14]

how can I update the initialTime of the Timer in a class based component? I am setting the initialTime based on state, but the timer's initialTime doesn't update even when the value in state updates.

[Perelyn-sama]

To change the initial time based on a property, use useTimer

import { useTimer } from 'react-compound-timer'
export default function Timer(props) {
    const {
        value,
        controls: { setTime, reset }
    } = useTimer({ initialTime: 0 })

    useEffect(() => {
        setTime(props.initialTime)
    }, [props.initialTime]);
    return (
        <div>
            <h2>{value.m}</h2>
            <h2>{value.s}</h2>
        </div>
    )
}

Can you pls use this in an example

[Hila1]

hey, check out this comment worked great for me!

for any one who is wondering, here is my code:

` import { FC, useEffect, useRef, useState } from 'react'; import './TimerComponent.css'; import React from 'react'; import Timer from 'react-compound-timer' import ITimer from '../../Interfaces/ITimer'

const TimerComponent: FC<ITimer> = (props: ITimer) => { const stopwatchControl = useRef(null);

useEffect(() => {
    changeTimerState(props.command);

}, [props.command, props.startTime]);

const changeTimerState = (timerState: string) => {
    switch (timerState) {
        case "start":
            stopwatchControl.current.start()
            break;
        case "stop":
            stopwatchControl.current.stop()
            break;
        case "reset":
            stopwatchControl.current.reset();
            break;
        default: console.log("error with stopwatch")
            break;
    }
}

return (
    <div key={props.startTime}>
        <Timer
            initialTime={props.startTime}
            lastUnit="m"
            startImmediately={false}
            formatValue={(value) => `${(value < 10 ? `0${value}` : value)}`}
        >
            {(control) => {
                stopwatchControl.current = control
                return (
                    <React.Fragment>
                        <Timer.Minutes />:
                        <Timer.Seconds />
                    </React.Fragment>
                )
            }}
        </Timer>
    </div>
);

}

export default TimerComponent; `

in the parent component: ` const [timerData, setTimerData] = useState<ITimer>({ command: "stop", startTime: 0 });

useEffect(() => {
    setTimerData({ command: "start", startTime: 60000 });// 1 minute
}, []);

return (
       <TimerComponent command={timerData.command} startTime={timerData.startTime} />
);

} `