Answer the question
In order to leave comments, you need to log in
How to force the component to be updated?
Good afternoon.
I want to make the second hand move.
Now it only moves when it's updated.
I decided that setInterval() is a good fit, but it still lacks understanding of React.Component
and the React philosophy in general.
If it’s easy to show how to implement this, and if I approach it incorrectly, then I’m ready to hear criticism.
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 the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question