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 — keikai
– keikai, Commented Feb 20, 2020 at 4:49

niks · Accepted Answer · 2020-02-20 04:55:10Z

1

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()}
            />)
    }

answered Feb 20, 2020 at 4:55

niks

4764 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Diego Fernandes · Accepted Answer · 2020-05-18 13:58:26Z

0

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
            />)
    }

answered May 18, 2020 at 13:58

Diego Fernandes

112 bronze badges

Collectives™ on Stack Overflow

React cannot update during an existing state transition

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related