React cannot update during an existing state transition

Question

I have a react app with react-countdown-circle-timer installed. When the onComplete() method of the circle timer fires, I am setting the state but I get this warning: Warning: Cannot update during an existing state transition (such as within 'render').

import React from 'react';
import { CountdownCircleTimer } from 'react-countdown-circle-timer';

export default class Test extends React.Component {

    constructor() {
        super();
        this.state = {
            userMustWait: false
        }
    }

    render() {
        return (
            <CountdownCircleTimer
                isPlaying
                durationSeconds={3}
                colors={[["#004777", 0.33], ["#F7B801", 0.33], ["#A30000"]]}
                onComplete={() => { this.setState({ userMustWait: false }) }}
            />)
    }
}

Does this answer your question? [ReactJS: Warning: setState(...): Cannot update during an existing state transition](https://stackoverflow.com/questions/37387351/reactjs-warning-setstate-cannot-update-during-an-existing-state-transiti) — keikai, Feb 20 '20 at 04:49

score 1 · Answer 1 · answered Feb 20 '20 at 04:55

You have to write function instead doing in render itself

onclick(){
   this.setState({ userMustWait: false })    
}

render() {
        return (
            <CountdownCircleTimer
                isPlaying
                durationSeconds={3}
                colors={[["#004777", 0.33], ["#F7B801", 0.33], ["#A30000"]]}
                onComplete={() => this.onclick()}
            />)
    }

score 0 · Answer 2 · answered May 18 '20 at 13:58

I believe that only the {

onclick(){
   this.setState({ userMustWait: false });
}

render() {
        return (
            <CountdownCircleTimer
                isPlaying
                durationSeconds={3}
                colors={[["#004777", 0.33], ["#F7B801", 0.33], ["#A30000"]]}
                onComplete={() => { this.onclick() }} // <-- on here
            />)
    }

React cannot update during an existing state transition

2 Answers2