Асинхронные задачи в react(SetInterval)

Question

Помогите пожалуйста, начал изучать реакт, пытаюсь сделать часы в компоненте, в консоль время попадает, но на return не возвращает разметку в div

import React from 'react'
import './progressBar.scss'

export default function progressBar(props){
    return(
        <div className="progress-bar">
            {clock()}

            
        </div>
    )
}


function clock(){
    setInterval(()=>{
        var date = new Date(),
        hours = (date.getHours() < 10) ? '0' + date.getHours() : date.getHours(),
        minutes = (date.getMinutes() < 10) ? '0' + date.getMinutes() : date.getMinutes(),
        seconds = (date.getSeconds() < 10) ? '0' + date.getSeconds() : date.getSeconds();
        console.log(hours + ':' + minutes + ':' + seconds)
    return (
            <p>{hours + ':' + minutes + ':' + seconds}</p>
    )
    },1000)
}

Answer 1

import React, {useState, useEffect} from 'react'
 const styles = {
  fontSize: '30px'
 }

export default function(props){
  const [dateNow, setDate] = useState(getTime())

  useEffect( () => {
    setInterval(()=>{
      setDate(getTime())
    },1000)

  }, [])

  function getTime(){
    var date = new Date(),
    hours = (date.getHours() < 10) ? '0' + date.getHours() : date.getHours(),
    minutes = (date.getMinutes() < 10) ? '0' + date.getMinutes() : date.getMinutes(),
    seconds = (date.getSeconds() < 10) ? '0' + date.getSeconds() : date.getSeconds();
    return {hours, minutes, seconds}
  }

  return(
    <div className="progress-bar">
        <p style={styles}>{dateNow.hours + ':' + dateNow.minutes + ':' + dateNow.seconds}</p>
    </div>
  )
}

БЛОГ НА HUSL

Асинхронные задачи в react(SetInterval)

Ответы (1 шт):