timer keeps resetting in react-native

Question

I am developing a react-native quiz application. Where i will fetch 5 questions from the backend and display them one by one to user. User can skip the current question or can answer current question to go to next question.

There is a timer on the top that will start countdown from 300 seconds.

Now the problem i am facing is that whenever the user skips/attempt the question (visit next next question), timer resets itself and start countdown again from 300 seconds.

I want to keep the timer running even after next question is visited. Can anyone please help me resolving this?

if anyone need i can give example code what/how i am implementing this.

Below is example code :

export default class QuestionLayout extends Component {
constructor(props) {
    super(props);
    this.state = {
        currentQuestion: 0,
        questionsData: {}
    };
}

handleSkipQuestion() {
    this.props.next_question();
}


render() {
    const data = this.props.questions;

        return (
            <View>
               <Col>
                 <CountdownCircle seconds={60} radius={25} />
               </Col>           
               <Button rounded onPress={this.handleSkipQuestion}    //for going to next question
                />
                <View >
                   <Card>
                     <CardItem>
                        <MyWebView
                            style={{
                                flex: 1,
                                alignItems: 'center',
                                justifyContent: 'center',
                                 marginRight: 20
                                }}
                                source={{
                                    html: this.wrapMathjax(questionData) //for displaying questoins
                                }}
                            />
                        </CardItem>
                    </Card>
                </View>
        );
    }
}

Answer 1

do something like this.

<QuizComponent>
   <Timer />
   <QuestionWithOptions />
   <ActionButtons />
</QuizComponent

1.QuizComponent will be the top level component which will fetch the data for the quiz.and it will keep the state of the entire quiz.

2.Timer will take timer details from QuizComponent and its task is to run the timer and notify the parent when time is over.

3.QestionWithOptions will take the question data from the parent and render it in a way you want it. user can select the correct anwser from the options and notify the change to the parent so that parent keeps track of what has changed with what values,

4.ActionButtons will have buttons that will change the questions or submit the quiz by notifiying the parent.

all the data and state will be maintained by the QuizComponent, when user hits next question the data forQuestionWithOptions will only change. thus your Quiz state is preserved. your timer is happy