Rendering html in react with hooks not working - reactjs

Question

I have a Task component which shows what task i need to do and when, and i want this to auto update when its time for it to change. So i was trying to do something like this
function Task(){
const [data, setData] = useState();
const [currentTask, setTask] = useState();
React.useEffect(() => {
fetch("/api")
.then((res) => res.json())
.then((data) => setData(data.tasks));
}, []);
function determineTask(){
Object.keys(data).map(function(key, index){
if(msSinceDayBegan > data[key].startMs && msSinceDayBegan < data[key].endMs){
setTask(data[key].task);
const nextIndex = Object.keys(data)[index+1];
setTimeout(determineTask, (data[nextIndex].startMs - msSinceDayBegan))
}
})
}
if(data && !initialized){
initialized = true;
determineTask();
}
console.log(currentTask);
return(
<div>
{console.log("inside return")}
<p>{currentTask? currentTask: "Loading..."}</p>
</div>
)
}
when I log currentTask I get back the result I want. However, before that, there are a few logs of undefined, but at the end, it prints out the actual value of the task and then logs "inside return". But the only thing getting rendered on my app is "loading...", why is this? currentTask has a value, am I missing something? I've tried all that I could but I couldn't understand it.
Thank you for your help!

Answer 1

This is happening because the function determineTask() is being called before the data is fetched. Data fetching often takes a couple seconds, and the determineTask() function is being called as soon as the component renders.
I would suggest putting the block of code:
function determineTask(){
Object.keys(data).map(function(key, index){
if(msSinceDayBegan > data[key].startMs && msSinceDayBegan < data[key].endMs){
setTask(data[key].task);
const nextIndex = Object.keys(data)[index+1];
setTimeout(determineTask, (data[nextIndex].startMs - msSinceDayBegan))
}
})
}
if(data && !initialized){
initialized = true;
determineTask();
}
console.log(currentTask);
inside a useEffect. useEffect has a second parameter of a dependency array that will trigger the useEffect to run again when one of the dependencies change.
In your first useEffect, you're changing the data state variable and then you want the currentTask state variable to change once you've retrieved the data.
So, your second useEffect will look something like:
useEffect(() => {
function determineTask(){
Object.keys(data).map(function(key, index){
if(msSinceDayBegan > data[key].startMs && msSinceDayBegan < data[key].endMs){
setTask(data[key].task);
const nextIndex = Object.keys(data)[index+1];
setTimeout(determineTask, (data[nextIndex].startMs - msSinceDayBegan))
}
})
}
if(data && !initialized){
initialized = true;
determineTask();
}
console.log(currentTask);
},[data]);