I want to make app for display live app on big devices. I just create the function for checking time for every second (just for sim).
Time state work fine in display, but if I check the artist "right now" here is a problem. Every time when state is updated, displayed name is jumping between new and old state.
Where is the problem? Thanks...
import React, { useState } from "react";
import Artist from "../Artist";
import Database from "../Data.json"
const Engine = () => {
const [data, setData] = useState(Database);
const [hour, setHour] = useState(null);
const [minute, setMinute] = useState(null);
const [second, setSecond] = useState(null);
const [nowArtist, setNowArtist] = useState('');
// Update time every second //
const updateTime = () => {
// const h = new Date().getHours(); //
const h = 16;
const m = new Date().getMinutes();
const s = new Date().getSeconds();
setHour(h);
setMinute(m);
setSecond(s);
}
const updateArtis = () => {
data.stage1.filter(el => {
if(el.startHour === hour) {
setNowArtist(el)
}
})
}
setInterval(() => {
updateTime();
updateArtis();
}, 1000);
return (
<Artist name={nowArtist.name} />
)
}
export default Engine;