I am created a to do app with react. These notes contain timestamps of their creation as well as due dates. In the list, I want to have a string which says X progress (ie totalTimeDifference-timeElapsed). However, I don't want the function which calculates X to continue calling after it reaches 100 (which is 100%). What can I do?
I tried doing a conditional render but this wouldn't work either.
const getProgress = (dueDate, timeCreated) => {
const totalTimeDifference = new Date(dueDate) - new Date(timeCreated);
const timeLeft = new Date(dueDate) - new Date(currentTime);
const progress = Math.round(((totalTimeDifference - timeLeft)/totalTimeDifference)*100)
return progress;
}
return (
<div className="list">
<ul>
{elementsList.map((element, index) => (
<Card className="cardElement" variant="filled" key={index}>
<CardBody>
<Stack divider={<StackDivider />}>
<Box className="listElementBody">
<Text>{element.text}</Text>
<ButtonGroup>
<Button colorScheme="red" onClick={() => handleDeleteClick(index)}>Delete</Button>
<Button colorScheme="blue" onClick={() => handleEditClick(index)}>Edit</Button>
</ButtonGroup>
</Box>
<Box>
<Heading fontSize='1xl'>Due in:</Heading>
<Text>{getTimeDifference(element.dueDate)}</Text>
<Progress colorScheme='green' size='lg' hasStripe value={getProgress(element.dueDate, element.timestamp)} />
</Box>
</Stack>
</CardBody>
</Card>
))}
</ul>
</div>
)