Tell us what’s happening:
Hi, I am trying to create a timer using react, and I’m using react 18 on codepen. I need the hooks so I can access the state when using setInterval, but it seems when I try to use any of the hooks, the rest of the code after doesn’t run. I tried to log a number after using useState and it doesn’t log it to the console, an assistance would be appreciated.
Your code so far
class Timer extends React.Component{
constructor(props){
super(props);
this.state = {
timer: this.props.Session * 60,
type: "session",
isStopped: true
};
this.handlePlay = this.handlePlay.bind(this);
this.handlePause = this.handlePause.bind(this);
}
handlePause(){
}
handlePlay(){
const [timer, setTimer] = useState(0);
const timerRef = useRef(timer);
timerRef.current = timer;
console.log(10);
render(){
return(
<div class="countdown">
<p id="countdown">{this.props.Session}:00</p>
<button onClick={this.handlePlay}><i class="fas fa-play"> </i></button>
<button onClick={this.handlePause}><i class="fas fa-pause"> </i></button>
<button onClick={this.props.Reset}><i class="fas fa-undo"> </i></button>
</div>
)
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:98.0) Gecko/20100101 Firefox/98.0
Challenge: Build a 25 + 5 Clock
Link to the challenge: