why do I have "Warning: undefined(...): Cannot update during an existing state transition..." error?

Question

so i have this in my code like this:

  class TimersDashboard extends React.Component{
     constructor() {
      super(props);
      this.state = {
      timers: [ 
       {id: uuid.v4(), text:'I am the first id' }, 
       { id:uuid.v4(), text:'I am the second text' }
      ]
      };
     }
      clickEdit(id) {
            this.openForm(id);
        }

        openForm(id) {
            this.setState({
                timers: this.state.timers.map((timer) => {
                    if(timer.id === id) {
                        return Object.assign({}, timer, { editFormOpen: true });
                    } else {
                        return timer;
                    }
                })
            });
        }

        handleCloseForm(id) {
            this.closeForm(id);
        }

        closeForm(id) {
            this.setState({
                timers: this.state.timers.map((timer) => {
                    if(timer.id === id) {
                        return Object.assign({}, timer, { editFormOpen: false   });
                    } else {
                        return timer;
                    }
                })
            });
        }

    }
render() {
 return (
  <Timer id={this.state.data[0].id} onEdit={this.clickEdit.bind(this)} onDelete = {this.handleCloseForm.bind(this)}/> // as if wroking on the first id
 );
}
}
}

However, below, I passed the methods as props, the other component I tried to invoke these the same way, you can see their code is slightly similar in way.

class Timer extends React.Component {

    constructor(props) {
        super(props);
        this.handleEditClick = this.handleEditClick.bind(this);
        this.handleTrashClic = handleTrashClic.bind(this);
    }
    handleEditClick() {
        this.props.onDelete(this.props.id);
    }
    handleTrashClick() {
        this.props.onEdit(this.props.id);
    }
render() {
 return(
  // ... onClick = {()=>this.handleEditClick(this.props.id)} .. 
  // ... onClick = {()=>this.handleTrashClick(this.props.id)} ..
);
}
}
}

I code them same way on other component, the delete method works on other component but I don't know why the Edit method does not and I can't make it work, I tried to pass the parentObj context, added .bind(this), But I cannot make it work. My error is "Warning: undefined(...): Cannot update during an existing state transition...". How do I make it work?

Answer 1

Created the same example in jsfiddle, its working. Try this:

Parent Component:

class TimersDashboard extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
            timers: [ 
               {id: 1, text:'I am the first text' }, 
               {id: 2, text:'I am the second text' }
            ]         
      };
    }

   edit(id){
       let timers = this.state.timers.map((timer) => {
          if(timer.id === id) {
              return Object.assign({}, timer, { editFormOpen: true });
          } else {
              return timer;
          }
       })
       this.setState({timers});
    }

    remove(id){
      let timers = this.state.timers.map((timer) => {
          if(timer.id === id) {
              return Object.assign({}, timer, { editFormOpen: false });
          } else {
              return timer;
          }
       })
       this.setState({timers});
    }

    render() {
        return (
            <div>
                <Timer id={1} edit={this.edit.bind(this)} remove={this.remove.bind(this)}/>
            </div>
        );
    }
}

Child Component:

class Timer extends React.Component{
    constructor(props) {
        super(props);
        this.state={};
    }

    edit(id){
       this.props.edit(id);
    }

    remove(id){
       this.props.remove(id);
    }

    render(){
       return(
            <div>
               In Child Component:
               <br/>
                Id: {this.props.id}
                <p onClick={this.edit.bind(this,this.props.id)}>Edit</p>
                <p onClick={this.remove.bind(this,this.props.id)}>Remove</p>
                *click on edit and remove to change the state
            </div>
       )
    }
}

Check jsfiddle for working example: https://jsfiddle.net/wqkfqusk/