How to convert code from Class Component into Functional Component-CodePudding

Can someone guide whether I changed it right, or what should be done to convert a class component into a functional component properly?

Class Component File

import React, { Component } from 'react'

export default class Timer extends Component {
    state = {
        minutes: 2,
        seconds: 0,
    }

    componentDidMount() {
        this.myInterval = setInterval(() => {
            const { seconds, minutes } = this.state

            if (seconds > 0) {
                this.setState(({ seconds }) => ({
                    seconds: seconds - 1
                }))
            }
            if (seconds === 0) {
                if (minutes === 0) {
                    clearInterval(this.myInterval)
                } else {
                    this.setState(({ minutes }) => ({
                        minutes: minutes - 1,
                        seconds: 59
                    }))
                }
            } 
        }, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.myInterval)
    }

    render() {
        const { minutes, seconds } = this.state
        return (
            <div>
                { minutes === 0 && seconds === 0
                    ? <h1>Busted!</h1>
                    : <h1>Time Remaining: {minutes}:{seconds < 10 ? `0${seconds}` : seconds}</h1>
                }
            </div>
        )
    }
}

Functional Component (What I did)

    import React, { useEffect, useState } from "react";
    
    export default function App() {
      const [state, setState] = useState({
        minutes: 2,
        seconds: 0

  });

  useEffect(() => {
    const myInterval = setInterval(() => {
      const { seconds, minutes } = state;

      if (seconds > 0) {
        setState((prevValue) => {
          return {
            ...prevValue,
            seconds: seconds - 1
          };
        });
      }
      if (seconds === 0) {
        if (minutes === 0) {
          clearInterval(myInterval);
        } else {
          setState((prevValue) => {
            return {
              ...prevValue,
              minutes: minutes - 1,
              seconds: 59
            };
          });
        }
      }
    }, 1000);

    return () => {
      clearInterval(myInterval);
    };
  }, []);

  return (
    <div>
      {state.minutes === 0 && state.seconds === 0 ? (
        <h1>Busted!</h1>
      ) : (
        <h1>
          Time Remaining: {state.minutes}:
          {state.seconds < 10 ? `0${state.seconds}` : state.seconds}
        </h1>
      )}
    </div>
  );
}

I don't have an idea about what I missed here, when I expected the same result of class component code, I am not getting it, Can someone please tell me what I need to change in the Functional component.

CodePudding user response：

I changed your your code to this one :

import React, { useEffect, useState } from "react";

export default function App() {
  const [state, setState] = useState({
    minutes: 2,
    seconds: 0
  });

  useEffect(() => {
    const myInterval = setInterval(() => {
      setState((prevValue) => {
        if (prevValue.seconds > 0) {
          return {
            ...prevValue,
            seconds: prevValue.seconds - 1
          };
        }
        if (prevValue.seconds === 0) {
          if (prevValue.minutes === 0) {
            clearInterval(myInterval);
            return prevValue;
          } else {
            return {
              ...prevValue,
              minutes: prevValue.minutes - 1,
              seconds: 59
            };
          }
        }
      });
    }, 1000);

    return () => {
      clearInterval(myInterval);
    };
  }, []);

  return (
    <div>
      {state.minutes === 0 && state.seconds === 0 ? (
        <h1>Busted!</h1>
      ) : (
        <h1>
          Time Remaining: {state.minutes}:
          {state.seconds < 10 ? `0${state.seconds}` : state.seconds}
        </h1>
      )}
    </div>
  );
}

I hope it's useful