Why does this cause an endless loop? I don't understand


At the moment the code does what I want it to do but it also crashes my application. I think it’s because of an endless loop but I am not sure. I want the code to check the two variables, if one equals the other, I want to change the state of the modal.

newTimestamp gets renewed every second based upon the seconds passed in ReactPlayer.

How can I prevent an endless loop in this situation?

This is my code:

import React, { Component } from 'react';
import { Modal, Button, Tooltip, Link, ControlLabel } from 'react-bootstrap';

export class CommentsModalAdmin extends Component {
   constructor(props) {
    this.state = {
      showModal: false,

    this.close = this.close.bind(this);
    this.open = this.open.bind(this);

    const newTimestamp = this.props.newTimestamp;
    const timestamp = this.props.comment.timestamp;
    if (newTimestamp === timestamp ){
      this.setState({ showModal: true });

  close() {
    this.setState({ showModal: false });

  open() {
    this.setState({ showModal: true });


  render() {
    const { newTimestamp, city, person, location, title, content, fileLink, timestamp } = this.props.comment;

    return (
      <div className="flex">
        <a onClick={this.open}><span className="modal-bg"><span style={{ height: rand }} className="modal-color" ></span></span></a>

        <Modal show={this.state.showModal} onHide={this.close} bsSize="lg">
          <Modal.Header closeButton>
            <Modal.Title >{title}</Modal.Title>
            <p><ControlLabel>Tagged city: </ControlLabel> {city}</p>
          <p><ControlLabel>Tagged person: </ControlLabel> {person}</p>
          <p><ControlLabel>Tagged location: </ControlLabel> {location}</p>
          <p><ControlLabel>Tagged image: </ControlLabel></p>
          <img src={fileLink} width="100%"/>
          <ControlLabel>Tagged content: </ControlLabel> <div dangerouslySetInnerHTML={{__html: content}} />

            <Button onClick={this.close}>Close</Button>

And in the parent I have this function:

			playing: false

These are the error messages I see: “Uncaught RangeError: Maximum call stack size exceeded”


“Warning: performUpdateIfNecessary: Unexpected batch number (current 3200, pending 1783)”


The jist of the issue is that there is a recursive call of the state changes. I would assume in this case, it is the stopVideo setting the state, then triggering changes below, which then call stopVideo again in a loop.