Как заставить обновляться компоненту?

Question

[asmut]

Добрый день.
Хочу заставить секундную стрелку двигаться.
Сейчас она двигается только при обновлении.
Решил что setInterval() неплохо подходит, вот только все же еще не хватает понимания React.Component
и вообще философии React.

Если несложно покажите как такое реализовать, и если подхожу неверно то готов услышать критику.

const deg = 6;

class Hod extends React.Component {

    constructor(props) {
        super(props);

        let day = new Date();

        this.state = {
            hh: 0,
            mm: 0,
            ss: new Date().getSeconds() * deg
        };
    }

    // updateCount() {
    //     this.setState((prevState, props) => {
    //             return {
    //                 ss: new Date().getSeconds() * 6
    //             }
    //         }
    //     )
    // }



    componentDidMount() {
        setInterval(() => {

            // let hh = day.getHours() * 30;
            // let mm = day.getMinutes() * deg;
            this.state.ss = new Date().getSeconds() * 6;
        })
    }

    render() {

        return (
            <div className={s.clock}>
                {/*<div className={s.hour}>*/}
                {/*    <div*/}
                {/*        className={s.hr}*/}
                {/*        id="hr"*/}
                {/*        style={{transform: `rotateZ(${this.props.hh}deg)`}}*/}
                {/*    >*/}

                {/*    </div>*/}
                {/*</div>*/}

                {/*<div className={s.min}>*/}
                {/*    <div className={s.mn}*/}
                {/*         id="mn"*/}
                {/*         style={{transform: `rotateZ(${this.props.mm}deg)`}}>*/}
                {/*    </div>*/}
                {/*</div>*/}

                <div className={s.sec}>
                    <div
                        className={s.sc}
                        id="sc"
                        style={{transform: `rotateZ(${this.state.ss}deg)`}}
                    >

                    </div>
                </div>
            </div>
        )
    }
}

function App() {

    return (
        <Hod />
    );
}

Answer 1

[Дмитрий]

UpdateCount разкомментируйте и не забываем ставить кол-во миллисекунд в setInterval

componentDidMount() {
  setInterval(() => {
    this.updateCount()
  }, 1000) 
}

Comments

[asmut]

Премного благодарен.

Не хочу показаться наглым, но можете дать оценку верности моего кода в архитектурного подхода?

Т.е. использование React.Component сейчас более верное направление почти во всех случаях?