how to render a data in periodic time using reactjs

Question

i want to toggle the data for say 4 minutes . i have 2 values which i need to flip . i have implemented flipping but i need it keep on flipping it till i get make a call to load the values again, Can anyone tell me how can i implement it?

 var Comment = React.createClass({


    render: function () {
        var flippedCSS = "true" ? " Card-Back-Flip" : " Card-Front-Flip";
           return (

          <div className="Card" >
              <div className= {"Card-Front"+flippedCSS} style={{backgroundColor: "Blue"}} >
                   <h3>{this.props.author}</h3>
                  </div>
               <div className={"Card-Back"+flippedCSS}  style={{backgroundColor: this.props.col}} >
                   <h3>{this.props.det}</h3>
               </div>

              </div>  



      );
    }
});



  var CommentList = React.createClass({


  render: function() {
      var commentNodes = this.props.data.map(
         function (comment) {
      return (
        <Comment author={comment.IssueTxt}  col = {comment.IssueValue} det ={comment.IssueTxtDet}   >

        </Comment>
      );
         });
    return (
      <div  style={{backgroundColor:"DarkBlue" }} >
          {commentNodes}
      </div>
    );
  }
});

Answer 1

From your requirement,the component Comment can not be dumb one.

You can use setInterval in componentDidMount.

Put the flippedCSS as a component state.

class Comment extends Component{

    constructor (){
        this.state = {
            flippedCSS : true
        }
    }

    render () {
        var flippedCSS = this.state.flippedCSS;

           return (    
                 <div className="Card">
                  ....    
                 </div>
              );
       }


    componentDidMount(){

        var interval = setInterval(()=>{

            this.setState({flippedCSS : !flippedCSS})

        }, 500);

    }

}