How can I stop a function from being called?

32 Views Asked by At

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>
    )
0

There are 0 best solutions below