How use Hooks state or props?

[nadfri]

Hy Vydimitrov,

How can i use props with your counter ? I want do an action on App when the timer is over.

[vydimitrov]

Hey, you can start by reading the props the component exposes.

[nadfri]

Hi, not this props, props of react function:

function ProgressBar(props) {
	return (
		<div className='ProgressBar'>
			<CountdownCircleTimer
				isPlaying
				duration={5}
				colors={[['#00f815', 0.5], ['#FFFF00', 0.5], ['#FF0000']]}
			</CountdownCircleTimer>
		</div>
	);
}
export default ProgressBar;

I need to know status of remainingTime to do an action like:

if(remainingTime == 0)
props.myFunction();

[vydimitrov]

function ProgressBar(props) {
	return (
		<div className='ProgressBar'>
			<CountdownCircleTimer
				isPlaying
				duration={5}
				colors={[['#00f815', 0.5], ['#FFFF00', 0.5], ['#FF0000']]}
                        />
                         {({ remainingTime  }) => {
                                /// your code here 
                              if(remainingTime == 0)
                              props.myFunction();

                              return null
                         }}
			</CountdownCircleTimer>
		</div>
	);
}
export default ProgressBar;

[nadfri]

Thanks for your fast reply; i have this warning, do you have a solution?

index.js:1 Warning: Cannot update a component (Competition) while rendering a different component (CountdownCircleTimer). To locate the bad setState() call inside CountdownCircleTimer, follow the stack trace as described

Code in component Competition

{displayProgress &&<ProgressBar close={()=>setDisplayProgress(false)}/>}

Code in ProgressBar component

function ProgressBar(props) {

	return (
		<div className='ProgressBar'>
			<CountdownCircleTimer
				isPlaying
				duration={5}
				colors={[['#00f815', 0.5], ['#FFFF00', 0.5], ['#FF0000']]}
				size={140}
				strokeWidth={12}
				trailColor='#00000000'>
				{({ remainingTime }) => {
					if (remainingTime === 0) {
					  props.close();
					  return null;
					}
					return (
					<div className='value'>
						{Math.floor(remainingTime / 60): {remainingTime % 60}s`}
					</div>
					);
				}}
			</CountdownCircleTimer>
		</div>
	);
}

export default ProgressBar;

[vydimitrov]

You can move your logic to onComplete, which will be called when remainingTime is 0. Move it there and see if you gonna get the same warning.

[nadfri]

Hi, its perfect with onComplete, thank you very much.

function ProgressBar(props) {

	return (
		<div className='ProgressBar'>
			<CountdownCircleTimer
				isPlaying
				duration={5}
				colors={[['#00f815', 0.5], ['#FFFF00', 0.5], ['#FF0000']]}
				size={140}
				strokeWidth={12}
				trailColor='#00000000'
                                onComplete={()=>props.close()}
                                 >
				{({ remainingTime }) => {
					return (
					<div className='value'>
						{Math.floor(remainingTime / 60): {remainingTime % 60}s`}
					</div>
					);
				}}
			</CountdownCircleTimer>
		</div>
	);
}

export default ProgressBar;