A revision of countdown timer made with React way of thinking.

countdown.js

//: I'm retaining your old code and starting with new one.

var CountdownTimer = React.createClass( {
	"getInitialState": function getInitialState( ){
		return {
			"second": 0,
			"countdownState": "pause"
		};
	},

	"onClickPauseResume": function onClickPauseResume( ){
		//: I prefer strings than boolean because it is more descriptive.

		var countdownState = this.state.countdownState;

		if( countdownState == "pause" ){
			countdownState = "resume";

		}else{
			countdownState = "pause";
		}

		this.setState( {
			"countdownState": countdownState
		} );
	},

	"rollTimer": function rollTimer( ){
		//: This is wrong, I'm tired of converting it.
		//: @todo: Convert this to seconds.
		this.setState( {
			"second": Date.now( )
		} );
	},

	"updateTimer": function updateTimer( ){
		var countdownState = this.state.countdownState;
		//: I prefer not to use setInterval http://wallofscribbles.com/2011/setinterval-the-sneaky-basterd-child-of-javascript/
		//: I forgot the other blog why setInterval is bad.
		//: But for the brevity of this gist, I'll be forced by the gravity of this nature.
		//: this.interval is better that putting it in the state, because this is not by principle a state value.
		//: Always remember state variables affect the DOM view.

		if( countdownState == "pause" ){
			if( this.interval ){
				clearInterval( this.interval );

				this.interval = null;	
			}
			 
		}else{
			//: For safety only. You can remove this if rare cases arise that we haven't cleared the last interval instance.
			if( this.interval ){
				clearInterval( this.interval );

				this.interval = null;	
			}

			this.interval = setInterval( function onEachInterval( self ){
				self.rollTimer( );
			}, 1000, this );
		}
	},

   	"render": function onRender( ){
   		var second = this.state.second;

   		var countdownState = this.state.countdownState;

   		return (
   			<div>
   				<span>
   					{ second } seconds has elapsed. 
   				</span>

   				<button 
   					style={ { "display": ( countdownState == "pause" )? "block" : "none" } }
   					onClick={ this.onClickPauseResume }>
   					Pause
   				</button>
   				
   				<button 
   					style={ { "display": ( countdownState == "resume" )? "block" : "none" } }
   					onClick={ this.onClickPauseResume }>
   					Resume
   				</button>
   			</div>
   		);
	},

	"componentDidUpdate": function componentDidUpdate( prevProps, prevState ){
		if( this.state.countdownState != prevState.countdownState ){
			this.updateTimer( );
		}
	}
} ); 

CountdownControl.js

var CountdownControl = React.createClass({
  // Simplified for brevity
  
  render: function() {
    var control = this.props.status
      ? 'Pause'
      : 'Resume';
      
    return (
      <span onClick={this._handleClick}>
        {control} |
      </span>
    );
  },
  _handleClick: function() {
    // Toggle interval (clear or set) based on this.props.status
  }
});

CountdownTimer.js

var CountdownTimer = React.createClass({
  // Simplified for brevity
  _setInterval: function() {
    /* this.interval = setInterval....
     * call setTick as callback for setInterval 
     */
  },
  _clearInterval: function() { /* this.interval = clearInterval.. */ },
  
  _setTick: function() { /* run tick */ },
  
  render: function() {
    return (
      <CountdownControl
        status={this.interval}
        pause={this._setInterval}
        resume={this._clearInterval} />
      {this.state.elapsed} seconds has elapsed
    );
  }
});