Develop Reference

How to replace react component with another when event triggered in that component

So, i (Total react beginner) have this React component.
import './cryptography.css';
import {useRef} from 'react';
import useInterval from 'react-useinterval';
import { useState } from 'react';
const DisplayTimer = () => {
const [time, setTime] = useState(0);
useInterval(() => {
setTime(time + 1);
}
, 1000);
const hours = Math.floor(time / 3600);
const minutes = Math.floor((time % 3600) / 60);
const seconds = time % 60;
return (
<div className="timer">
<h3>Timer</h3>
<p>{hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}</p>
</div>
)
}
const CryptoOne = () => {
const inputRef = useRef();
function verifyAnswer() {
if (inputRef.current.value === "c6e24b99a8054ab24dd0323530b80819") {
alert("Correct!");
}
else {
alert("Wrong!");
}
}
return (
<div className="crypto-one">
<h3>Level One</h3>
<p>Convert this plaintext into an MD5 hash - "RollingStonesGatherNoMoss"</p>
<input ref={inputRef} type="text" id="one-answer" name="one-answer" />
<button onClick={verifyAnswer}>Submit</button>
</div>
)
}
const CryptoTwo = () => {
const inputRef = useRef();
function verifyAnswer() {
if (inputRef.current.value === "IaMaHackerManHaHa") {
alert("Correct!");
}
else {
alert("Wrong!");
}
}
return (
<div className="crypto-two">
<h3>Level Two</h3>
<p>Decode Caesar cipher into plaintext - "FxJxExzhboJxkExEx"</p>
<input ref={inputRef} type="text" id="two-answer" name="two-answer" />
<button onClick={verifyAnswer}>Submit</button>
</div>
)
}
const CryptoThree = () => {
const inputRef = useRef();
function verifyAnswer() {
let input = inputRef.current.value;
let answer = "SHA256".toLowerCase();
if (input === answer) {
alert("Correct!, completed the exercise");
}
else {
alert("Wrong!");
}
}
return (
<div className="crypto-three">
<h3>Level Three</h3>
<p>Identify the type of the hash (Type only the hash type, with no spaces) - "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"</p>
<input ref={inputRef} type="text" id="three-answer" name="three-answer" />
<button onClick={verifyAnswer}>Submit</button>
</div>
)
}
const Cryptography = () => {
const [active, setActive] = useState("crypto-one");
return (
<div className="cryptography">
<h1>Cryptography</h1>
<DisplayTimer />
<div className="crypto-container">
<CryptoOne />
</div>
</div>
)
}
export { Cryptography };
Here, i have this cryptography function that will display a question and if it is correct, that question will be replaced with another.
I have 3 seperate functions CryptoOne, CryptoTwo and CryptoThree which will be displayed in function Cryptography. So that means if the answer for the question for CryptoOne is correct, then it will be replaced with CryptoTwo and so on. So my questions is HOW DO I DO IT?
Thanks in advance.

ANSWER TO YOUR LAST COMMENT TO HANDLE TIMER
Instead of using react-useinterval you could create a useTimer() hook of your own
import { useEffect, useRef, useState } from "react";
const useTimer = () => {
const [time, setTime] = useState(0);
const hours = Math.floor(time / 3600);
const minutes = Math.floor((time % 3600) / 60);
const seconds = time % 60;
let interval = useRef();
useEffect(() => {
interval.current = setInterval(() => {
setTime(prevTime => prevTime + 1);
}, 1000);
return () => {
clearInterval(interval.current);
};
}, [setTime]);
const stopTimer = () => {
clearInterval(interval.current);
};
return { hours, minutes, seconds, stopTimer };
};
export default useTimer;
You can maintain a activeIndex state in Cryptography component. And have a changeSlide method which increments activeSlideIndex by 1 everytime the answer is correct. As shown below
TIMER RELATED COMMENT
Use that hook in Cryptography component. Pass hours, minutes & seconds as props in DisplayTimer component. And pass stopTimer function to CryptoThree component & use it when final answer is complete
const Cryptography = () => {
const [active, setActive] = useState("crypto-one");
const [activeIndex, setActiveIndex] = useState(1);
const { hours, minutes, seconds, stopTimer } = useTimer();
const incrementIndex = () => {
setActiveIndex(prevIndex => prevIndex + 1);
};
return (
<div className="cryptography">
<h1>Cryptography</h1>
<DisplayTimer hours={hours} minutes={minutes} seconds={seconds} />
<div className="crypto-container">
{activeSlideIndex === 1 && <CryptoOne changeIndex={incrementIndex} />}
{activeSlideIndex === 2 && <CryptoTwo changeIndex={incrementIndex} />}
{activeSlideIndex === 3 && <CryptoThree stopTimer={stopTimer} />}
</div>
</div>
);
};
const DisplayTimer = ({ hours, minutes, seconds }) => {
return (
<div className="timer">
<h3>Timer</h3>
<p>
{hours.toString().padStart(2, "0")}:
{minutes.toString().padStart(2, "0")}:
{seconds.toString().padStart(2, "0")}
</p>
</div>
);
};
You can pass this changeSlide() method as a prop in every component.
And call it whenever the answer is correct
const CryptoOne = ({ changeIndex }) => {
const inputRef = useRef();
function verifyAnswer() {
if (inputRef.current.value === "c6e24b99a8054ab24dd0323530b80819") {
alert("Correct!");
changeIndex();
} else {
alert("Wrong!");
}
}
return (
<div className="crypto-one">
<h3>Level One</h3>
<p>
Convert this plaintext into an MD5 hash - "RollingStonesGatherNoMoss"
</p>
<input ref={inputRef} type="text" id="one-answer" name="one-answer" />
<button onClick={verifyAnswer}>Submit</button>
</div>
);
};
const CryptoTwo = ({ changeIndex }) => {
const inputRef = useRef();
function verifyAnswer() {
if (inputRef.current.value === "IaMaHackerManHaHa") {
alert("Correct!");
changeIndex();
} else {
alert("Wrong!");
}
}
return (
<div className="crypto-two">
<h3>Level Two</h3>
<p>Decode Caesar cipher into plaintext - "FxJxExzhboJxkExEx"</p>
<input ref={inputRef} type="text" id="two-answer" name="two-answer" />
<button onClick={verifyAnswer}>Submit</button>
</div>
);
};
const CryptoThree = ({stopTimer) => {
const inputRef = useRef();
function verifyAnswer() {
let input = inputRef.current.value;
let answer = "SHA256".toLowerCase();
if (input === answer) {
alert("Correct!, completed the exercise");
stopTimer(); // Use stopTimer here when exercise is complete
} else {
alert("Wrong!");
}
}
return (
<div className="crypto-three">
<h3>Level Three</h3>
<p>
Identify the type of the hash (Type only the hash type, with no spaces)
- "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
</p>
<input ref={inputRef} type="text" id="three-answer" name="three-answer" />
<button onClick={verifyAnswer}>Submit</button>
</div>
);
};

Unusual behavior when value of variable change (easy)

Happy 2k22! I am building a countdown timer. I have two files. The first file takes the countDown time from input and the second from select dropdown .
I have implemented an increment button in the first file. It increases the countDown time by inc seconds i.e. time = time + inc.
So what's peculiar?
Thing is that when inc is replaced with any constant value, it works properly.
<button onClick={() => setSecondsRemaining(secondsRemaining + 3)}>
Increment {inc} sec
</button>
But when I used the input to enter the value and supply it through the variable inc, then it does not work. It increases randomly.
<button onClick={() => setSecondsRemaining(secondsRemaining + inc)}>
Increment {inc} sec
</button>
You can visit InputCountDown.js here
This is the full code:
import React, { useState, useEffect, useRef } from "react";
import "./styles.css";
const STATUS = {
STARTED: "Started",
STOPPED: "Stopped"
};
export default function InputCountDown() {
const [time, setTime] = useState(0);
const [inc, setInc] = useState(0);
const handleOnChange = (e) => {
//console.log(e.target.value);
setTime(e.target.value);
};
const handleOnChangeIncrement = (e) => {
console.log(e.target.value);
setInc(e.target.value);
};
const [secondsRemaining, setSecondsRemaining] = useState(time * 60);
//console.log(time);
const [status, setStatus] = useState(STATUS.STOPPED);
const secondsToDisplay = secondsRemaining % 60;
const minutesRemaining = (secondsRemaining - secondsToDisplay) / 60;
const minutesToDisplay = minutesRemaining % 60;
const hoursToDisplay = (minutesRemaining - minutesToDisplay) / 60;
const handleStart = () => {
setStatus(STATUS.STARTED);
setSecondsRemaining(time * 60);
};
const handleStop = () => {
setStatus(STATUS.STOPPED);
};
const handleReset = () => {
setStatus(STATUS.STOPPED);
setSecondsRemaining(time * 60);
};
useInterval(
() => {
if (secondsRemaining > 0) {
setSecondsRemaining(secondsRemaining - 1);
} else {
setStatus(STATUS.STOPPED);
}
},
status === STATUS.STARTED ? 1000 : null
// passing null stops the interval
);
return (
<>
<div className="App">
<h1>Countdown Using Input</h1>
<div style={{ padding: "12px" }}>
<label htmlFor="time"> Enter time in minutes </label>
<input
type="text"
id="time"
name="time"
value={time}
onChange={(e) => handleOnChange(e)}
/>
</div>
<div style={{ padding: "12px" }}>
<label htmlFor="inc"> Enter increment </label>
<input
type="text"
id="inc"
name="inc"
value={inc}
onChange={(e) => handleOnChangeIncrement(e)}
/>
</div>
<button onClick={handleStart} type="button">
Start
</button>
<button onClick={handleStop} type="button">
Stop
</button>
<button onClick={handleReset} type="button">
Reset
</button>
<div style={{ padding: 20, fontSize: "40px" }}>
{twoDigits(hoursToDisplay)}:{twoDigits(minutesToDisplay)}:
{twoDigits(secondsToDisplay)}
<div>
<button onClick={() => setSecondsRemaining(secondsRemaining + inc)}>
Increment {inc} sec
</button>
</div>
</div>
<div>Status: {status}</div>
</div>
</>
);
}
// source: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
// https://stackoverflow.com/a/2998874/1673761
const twoDigits = (num) => String(num).padStart(2, "0");
You can visit InputCountDown.js here
Please help me.

It's a very basic rule you missed mate. Whenever you get anything from TextInput, its always a string, even if you entered an integer. Try this:
<button onClick={() => setSecondsRemaining(secondsRemaining + parseInt(inc))}>
Increment {inc} sec
</button>

When consuming values from input elements recall that these are always string type values. Best to maintain the number type state invariant, so do the conversion from string to number when updating state.
const handleOnChange = (e) => {
setTime(Number(e.target.value));
};
const handleOnChangeIncrement = (e) => {
setInc(Number(e.target.value));
};
To help ensure users are entering number-like data into the inputs, specify each input to be type="number".
<div style={{ padding: "12px" }}>
<label htmlFor="time"> Enter time in minutes </label>
<input
type="number" // <-- number type
id="time"
name="time"
value={time}
onChange={handleOnChange}
/>
</div>
<div style={{ padding: "12px" }}>
<label htmlFor="inc"> Enter increment </label>
<input
type="number" // <-- number type
id="inc"
name="inc"
value={inc}
onChange={handleOnChangeIncrement}
/>
</div>
Recall also that when enqueueing state updates that if the next state value depends on the previous state value, i.e. when incrementing counts, etc..., that you should use a functional state update.
<button onClick={() => setSecondsRemaining(time => time + inc)}>
Increment {inc} sec
</button>

Is some wrong with this call stack in this react component?

I was trying to make a stopwatch counter however when I call the "startTimer" function, the setInterval function is fired before the setStartTime (is fired after I click the start button for the second time).
import React from "react";
import { useState, useRef } from "react";
import RunButton from "./RunButton";
const RunTimer = () => {
const [timerOn, setTimerOn] = useState(false);
const [startTime, setStartTime] = useState(0);
const [timerTime, setTimerTime] = useState(0);
const timerInterval = useRef(null);
const startTimer = () => {
setTimerOn(true);
setStartTime(Date.now() - timerTime);
timerInterval.current = setInterval(() => {
setTimerTime(Date.now() - startTime);
}, 1000);
};
const stopTimer = () => {
setTimerOn(false);
clearInterval(timerInterval);
};
const resetTimer = () => {
setStartTime(0);
setTimerTime(0);
};
let seconds = Math.floor(timerTime / 1000) % 60;
let minutes = Math.floor(timerTime / 1000 / 60) % 60;
return (
<div className="text-6xl font-medium text-center">
{minutes < 10 ? `0${minutes}` : minutes}:
{seconds < 10 ? `0${seconds}` : seconds}
<div className="flex gap-10 justify-around">
<RunButton title="start" action={startTimer} />
<RunButton title="stop" color="red" action={stopTimer} />
<RunButton action={resetTimer} color="yellow" title="reset" />
</div>
</div>
);
};
export default RunTimer;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I still dont understand why you need Date.now() to create a stopwatch.
What is wrong with:
const RunTimer = () => {
const [time, setTime] = useState(0);
const timerInterval = useRef(null);
const startTimer = () => {
if (!timerInterval.current) {
timerInterval.current = setInterval(() => {
setTime((t) => t + 1000);
}, 1000);
}
};
const stopTimer = () => {
clearInterval(timerInterval.current);
timerInterval.current = null;
};
const resetTimer = () => {
setTime(0);
};
const seconds = Math.floor(time / 1000) % 60;
const minutes = Math.floor(time / 1000 / 60) % 60;
useEffect(() => {
return () => clearInterval(timerInterval.current);
}, []);
return (
<div className="text-6xl font-medium text-center">
{minutes < 10 ? `0${minutes}` : minutes}:
{seconds < 10 ? `0${seconds}` : seconds}
<div className="flex gap-10 justify-around">
<button title="start" onClick={startTimer}>
start
</button>
<button title="start" onClick={stopTimer}>
stop
</button>
<button title="start" onClick={resetTimer}>
reset
</button>
</div>
</div>
);
};

React Countdown Circle Timer Resetting When Switching Tabs

In my project, I'm using the React Countdown Clock Timer NPM package. I have two of these timers show up at once, a minutes timer and seconds timer. Everything works fine except when I switch tabs my minutes keeps the correct amount of minutes, while my seconds timer resets. I want the seconds timer to still keep the correct amount of settings even when I switch tabs.
This is my current file for the timer where the iies
import React, { useState, useContext } from "react";
import { CountdownCircleTimer } from "react-countdown-circle-timer";
import { AuthContext } from "../../context/Auth";
import { ChillContext } from "../../context/ChillContext";
import { db } from "../../services/firebase";
import firebase from "firebase/app";
import chime from "../../sounds/chime.mp3";
import {
CountdownTimerWrapper,
CountdownTimerMain,
TimersWrapper,
RestartButton,
StartStopButton,
ButtonsWrapper,
TimerCheck,
TimerHeading,
TimerControl,
TimerText,
} from "./CountdownTimerElements";
import Toggle from "../Toggle/Toggle";
import { Howl } from "howler";
const minuteSeconds = 60;
const hourSeconds = 3600;
const renderTime = (dimension, time) => {
return (
<div className="time-wrapper">
<div className="time">{time}</div>
<div>{dimension}</div>
</div>
);
};
const getTimeSeconds = (time) => (minuteSeconds - time) | 0;
const getTimeMinutes = (time) => ((time % hourSeconds) / minuteSeconds) | 0;
const CountdownTimer = () => {
const stratTime = Date.now() / 1000; // use UNIX timestamp in seconds
const workEndTime = stratTime + 25 * 60; // use UNIX timestamp in seconds
const chillEndTime = stratTime + 5 * 60;
const [minutesKey, setMinutesKey] = useState(0);
const [secondsKey, setSecondsKey] = useState(10);
const [playing, setPlaying] = useState(false);
const [timerButtonDesc, setTimerButtonDesc] = useState("Start");
const { currentUser } = useContext(AuthContext);
const { chill, setChill } = useContext(ChillContext);
const chillRemainingTime = chillEndTime - stratTime;
const workRemainingTime = workEndTime - stratTime;
const timerProps = {
isPlaying: playing,
size: 100,
strokeWidth: 6,
};
const sound = new Howl({
src: [chime],
});
return (
<CountdownTimerWrapper>
<CountdownTimerMain>
<TimerHeading>Pomodoro Timer</TimerHeading>
{chill ? (
<TimersWrapper>
<CountdownCircleTimer
{...timerProps}
colors={[["#9294e3"]]}
key={minutesKey}
duration={hourSeconds}
initialRemainingTime={chillRemainingTime % hourSeconds}
onComplete={(totalElapsedTime) => {
return [chillRemainingTime - totalElapsedTime > minuteSeconds];
}}
>
{({ elapsedTime }) =>
renderTime("minutes", getTimeMinutes(hourSeconds - elapsedTime))
}
</CountdownCircleTimer>
<TimerControl>
<Toggle
onChange={(event) => {
setChill(event.target.checked);
setSecondsKey((prevKey) => prevKey + 1);
setMinutesKey((prevKey) => prevKey + 1);
setTimerButtonDesc("Start");
setPlaying(false);
}}
/>
<TimerText>{chill ? "Chill" : "Work"} Timer </TimerText>
</TimerControl>
<CountdownCircleTimer
{...timerProps}
colors={[["#9294e3"]]}
key={secondsKey}
duration={minuteSeconds}
initialRemainingTime={chillRemainingTime % minuteSeconds}
onComplete={(totalElapsedTime) => {
console.log(totalElapsedTime - chillRemainingTime);
if (totalElapsedTime - chillRemainingTime === 0) {
return false;
}
return [chillRemainingTime - totalElapsedTime > 0];
}}
>
{({ elapsedTime }) =>
renderTime("seconds", getTimeSeconds(elapsedTime))
}
</CountdownCircleTimer>
</TimersWrapper>
) : (
<TimersWrapper>
<CountdownCircleTimer
{...timerProps}
colors={[["#d87463"]]}
key={minutesKey}
duration={hourSeconds}
initialRemainingTime={workRemainingTime % hourSeconds}
onComplete={(totalElapsedTime) => {
return [workRemainingTime - totalElapsedTime > minuteSeconds];
}}
>
{({ elapsedTime }) =>
renderTime("minutes", getTimeMinutes(hourSeconds - elapsedTime))
}
</CountdownCircleTimer>
<TimerControl>
<Toggle
onChange={(event) => {
setChill(event.target.checked);
setSecondsKey((prevKey) => prevKey + 1);
setMinutesKey((prevKey) => prevKey + 1);
setTimerButtonDesc("Start");
setPlaying(false);
}}
/>
<TimerText>{chill ? "Chill" : "Work"} Timer </TimerText>
</TimerControl>
<CountdownCircleTimer
{...timerProps}
colors={[["#d87463"]]}
key={secondsKey}
duration={minuteSeconds}
initialRemainingTime={workRemainingTime % minuteSeconds}
onComplete={(totalElapsedTime) => {
if (totalElapsedTime - workRemainingTime === 0) {
db.collection("emails")
.doc(currentUser.email)
.update({
pomodoros: firebase.firestore.FieldValue.increment(1),
});
sound.play();
}
return [workRemainingTime - totalElapsedTime > 0];
}}
>
{({ elapsedTime }) =>
renderTime("seconds", getTimeSeconds(elapsedTime))
}
</CountdownCircleTimer>
</TimersWrapper>
)}
<ButtonsWrapper>
<RestartButton
onClick={() => {
setSecondsKey((prevKey) => prevKey + 1);
setMinutesKey((prevKey) => prevKey + 1);
setPlaying(false);
setTimerButtonDesc("Start");
}}
>
Restart Timer
</RestartButton>
<TimerCheck />
<StartStopButton
onClick={() => {
if (timerButtonDesc === "Start") {
setTimerButtonDesc("Stop");
} else {
setTimerButtonDesc("Start");
}
setPlaying(!playing);
}}
>
{timerButtonDesc}
</StartStopButton>
</ButtonsWrapper>
</CountdownTimerMain>
</CountdownTimerWrapper>
);
};
export default CountdownTimer;

The issue you have is that you are setting "key" to minutesKey.
Everytime you change "key" the timer will reset. You want to pass a constant number in if reset is not a part of the folw. If reset is part of the flow, have a separate state for it.
<CountdownCircleTimer
{...timerProps}
colors={[["#d87463"]]}
key={0}
duration={minuteSeconds}
initialRemainingTime={workRemainingTime % minuteSeconds}
onComplete={(totalElapsedTime) => {
if (totalElapsedTime - workRemainingTime === 0) {
db.collection("emails")
.doc(currentUser.email)
.update({
pomodoros: firebase.firestore.FieldValue.increment(1),
});
sound.play();
}
return [workRemainingTime - totalElapsedTime > 0];
}}
>
{({ elapsedTime }) =>
renderTime("seconds", getTimeSeconds(elapsedTime))
}
</CountdownCircleTimer>

React functional component: clearInterval() does not clear my interval

I'm building a simple timer app. When the user clicks play the handlePlayPause function is called. I've created an isRunning boolean to check if the timer is already running. If it's not, the timer will start (this first part works), whilst if it is, the pauseTimer function is called. This last function switches isRunning back to false and should clear the interval. However, the interval does not get cleared. Can you see what i'm doing wrong?
Thank you for your help!
export default function App() {
const [sessionLength, setSessionLength] = useState(25)
const [breakLength, setBreakLength] = useState(5)
const [timeLeft, setTimeLeft] = useState(25 * 60 * 1000)
const [isRunning, setIsRunning] = useState(false)
let intervalId = null
let handlePlayPause = () => {
if (!isRunning) {
setTimeLeft(sessionLength * 60 * 1000)
playTimer()
} else if (isRunning) {
pauseTimer()
}
}
let playTimer = () => {
setIsRunning(true)
intervalId = setInterval(() => {
setTimeLeft(timeLeft => timeLeft - 1000)
parseToMinuteSeconds(timeLeft)
}, 1000)
}
let pauseTimer = () => {
setIsRunning(false)
clearInterval(intervalId)
}
let resetAll = () => {
setSessionLength(25)
setBreakLength(5)
}
let parseToMinuteSeconds = timeInMilliseconds => {
return //a string with the time in this format 00:00
}
return (
<div className="App">
<Background>
<UpperMetalBand />
<UpperPart />
<LowerPart />
<LowerMetalBand />
<Wrapper>
<Title>Pomodoro</Title>
<Subtitle>TIMER</Subtitle>
<PlayButton
id="start_stop"
onClick = {handlePlayPause}
>
<i className="fa fa-play" />
</PlayButton>
<Reload
onClick={resetAll}
id="reset"
>
<i className="fas fa-sync-alt" />
</Reload>
<Session
setSessionLength={setSessionLength}
sessionLength={sessionLength}
/>
<Break
setBreakLength={setBreakLength}
breakLength={breakLength}
/>
<span id="time-label">
<Timer id="time-left">00:00</Timer>
</span>
</Wrapper>
</Background>
</div>
)
}

I think the problem is with how you store the interval id. when using function components and we want to store "instance" variables we can use the useRef hook.
let intervalId = useRef(null)
let handlePlayPause = () => {
if (!isRunning) {
setTimeLeft(sessionLength * 60 * 1000)
playTimer()
} else if (isRunning) {
pauseTimer()
}
}
let playTimer = () => {
setIsRunning(true)
intervalId.current = setInterval(() => {
console.log('interval')
setTimeLeft(timeLeft => timeLeft - 1000)
parseToMinuteSeconds(timeLeft)
}, 1000)
}
let pauseTimer = () => {
setIsRunning(false)
clearInterval(intervalId.current)
}
There is a similar example to your use case on the react docs