React js converting a class to functions - reactjs

Question

I currently have a timer that works with a class but I need to use only functions so it works with the App.js file I am running to show what I need. Here is an example of how I would call my file from the App:
return (
<div>
<h1>Example Timer</h1>
<h2>Other files have been removed for example purposes</h2>
<Timer onClick ={this.startTimer} />
</div>
)
And here is my Timer class which needs to be converted to functions so I can export it like:
export default function Timer(onClick)
Here is the entire class component for the timer
import React from 'react';
import "./timer.css";
class Timer extends React.Component{
constructor(){
super();
this.state = { time: {}, seconds: 5, color: 'darkgrey'};
this.timer = 0;
this.startTimer = this.startTimer.bind(this);
this.startCountDown = this.startCountDown.bind(this);
}
convertToSeconds(sec){
let divisor_for_minutes = sec % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
let divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
var obj = {"m": minutes, "s": seconds};
return obj;
}
componentDidMount() {
let timeLeftVar = this.convertToSeconds(this.state.seconds);
this.setState({ time: timeLeftVar });
}
startTimer(){
// If timer is not set, set the interval
if(this.timer === 0 && this.state.seconds > 0){
// 1000 ms = 1 second
this.timer = setInterval(this.startCountDown, 1000);
}
}
startCountDown() {
let seconds = this.state.seconds - 1;
if(seconds >= 0){
if(seconds<=2){
this.setState({color: 'red'})
}
this.setState({
time: this.convertToSeconds(seconds),
seconds: seconds
});
}
else{
this.setState({time: this.convertToSeconds(5), seconds: 5, color: 'darkgrey'});
clearInterval(this.timer);
this.timer = 0;
}
}
render(){
return(
<div className="component-timer">
<div class="startbtn">
<button onClick={this.startTimer}>Start</button>
</div>
<div class="timer"><div style = {{color: this.state.color}}>
m: {this.state.time.m} s: {this.state.time.s}
</div>
</div>
</div>
);
}
}
export default Timer;

Answer 1

With a new version of react we can use Hook useState and it will look like this
import React, { useState } from 'react';
import "./timer.css";
const convertToSeconds = (sec) => {
let divisor_for_minutes = sec % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
let divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
var obj = {"m": minutes, "s": seconds};
return obj;
}
const Timer= () => {
const [seconds, setSeconds] = useState(5)
const [time, setTime] = useState(convertToSeconds(seconds))
const [color, setColor] = useState('darkgrey')
const [timer, setTimer] = useState(0)
const startTimer = () => {
// If timer is not set, set the interval
if(timer === 0 && seconds > 0){
// 1000 ms = 1 second
setTimer(setInterval(startCountDown, 1000))
}
}
const startCountDown = () => {
let newSeconds = seconds - 1;
if(newSeconds >= 0){
if(newSeconds<=2){
setColor('red')
}
setTime(convertToSeconds(newSeconds))
setSeconds(newSeconds)
}
else{
setTime(convertToSeconds(5))
setSeconds(5)
setColor('darkgrey')
setTimer(0)
}
}
return(
<div className="component-timer">
<div class="startbtn">
<button onClick={startTimer}>Start</button>
</div>
<div class="timer"><div style = {{color}}>
m: {time.m} s: {time.s}
</div>
</div>
</div>
)
}
export default Timer

Answer 2

This is the line by line conversion of the class component to function component using react hooks... (You need react version higher than 16.8.x https://reactjs.org/docs/hooks-intro.html)
import React, { useState, useEffect } from 'react';
import './timer.css';
export default function Timer() {
const [seconds, setSeconds] = useState(5);
const [time, setTime] = useState({});
const [color, setColor] = useState('darkgrey');
const [timer, setTimer] = useState(0);
//only executes when component mounts by passing "[]".
useEffect(() => {
setTime(convertToSeconds(seconds));
}, []);
function convertToSeconds(sec) {
let divisor_for_minutes = sec % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
let divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
var obj = { m: minutes, s: seconds };
return obj;
}
function startTimer() {
// If timer is not set, set the interval
if (timer === 0 && seconds > 0) {
// 1000 ms = 1 second
setTimer(setInterval(startCountDown, 1000));
}
}
function startCountDown() {
let _seconds = seconds - 1;
if (_seconds >= 0) {
if (_seconds <= 2) {
setColor('red');
}
setTime(convertToSeconds(_seconds));
setSeconds(_seconds);
} else {
setTime(convertToSeconds(5));
setSeconds(5);
setColor('darkgrey');
clearInterval(timer);
setTimer(0);
}
}
return (
<div className="component-timer">
<div className="startbtn">
<button onClick={startTimer}>Start</button>
</div>
<div className="timer">
<div style={{ color: color }}>
m: {time.m} s: {time.s}
</div>
</div>
</div>
);
}

Answer 3

You do not need function to work, you can use your class component and use it to render in directly in index.js or anywhere you want to render
Code is somewhat like this
import React from 'react';
import ReactDOM from 'react-dom';
import Timer from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<div>
<h1>Example Timer</h1>
<h2>Other files have been removed for example purposes</h2>
<Timer />
</div>
, document.getElementById('root'));
registerServiceWorker();