modify code for React Dealing with State app


I am trying to teach myself React using Kirupa’s book and videos. I followed along and created the ‘Dealing with State’ app and I am trying to modify it some. I have the counter counting down and what I would like to do is display a message when the counter hits zero, but I am unsure of what I need to do to achieve that. Hopefully, Kirupa or someone else can assist.

Here is what I have so far code wise.
State.html (2.4 KB)

Hi webguynyc!
Sorry for the delay in replying. My post was saved as a draft but I forgot to submit it. There are several ways you can do that. One way is what you see below:

<!DOCTYPE html>
<title>Learning React</title>
<script src="[email protected]/dist/react.js"></script>
<script src="[email protected]/dist/react-dom.js"></script>
<script src=""></script>
<style type="text/css">
  body {

  font-family: sans-serif;

  padding: 50px;
  background-color: #dddddd;
  font-family: sans-serif;

h1{color:#336699;font-family:arial, helvetica, sans-serif;font-weight:bold}

<div id="container"></div>
<script type="text/babel">
var intervalID;
var finished = false;

var CountDown = React.createClass({
  getInitialState: function() {
    return {
      countDown: 20
  timerTick: function() {
    if (this.state.countDown > 0) {
        countDown: this.state.countDown - 1
    } else {
      finished = true;
  componentDidMount: function() {
    intervalID = setInterval(this.timerTick, 1000);
  render: function() {
    var counterStyle = {
      color: "#deccd5",
      fontSize: 50

	  var eventStyle = {
      color: "#003366",
      fontSize: 25

    var count = this.state.countDown.toLocaleString();

    var firstText, secondText, thirdText;

    if (this.state.countDown > 0) {
      firstText = <h2 style={this.props.textStyles.smallEmphasis}>Count Down</h2>;
      secondText = <h2 style={this.props.textStyles.emphasis}>WORLDWIDE</h2>;
      thirdText = <p style={this.props.textStyles.small}>(since you loaded this example)</p>;
    } else {
      firstText = <h2 style={this.props.textStyles.smallEmphasis}>FINISHED</h2>;
      secondText = <p></p>;
      thirdText = <p></p>;

    return (
        <h1 style={counterStyle}>{count}</h1>

var CountDownDisplay = React.createClass({
    render: function() {
      var commonStyle = {
        margin: 0,
        padding: 0
      var divStyle = {
        width: 250,
        textAlign: "center",
        backgroundColor: "#684356",
        padding: 40,
        fontFamily: "sans-serif",
        color: "#ffffff",
        borderRadius: 10,
  		  textShadow:"1px 1px 1px rgba(0,0,0,.5)",
        boxShadow:"0 0 5px #000"

      var textStyles = {
        emphasis: {
          fontSize: 38,
        smallEmphasis: {
        small: {
          fontSize: 17,
          opacity: 0.5,

        <div style={divStyle}>
          <CountDown textStyles={textStyles}/>




I modified the CountDown component to handle displaying the text as well. I am passing in the text styles as a prop from the CountDownDisplay component. That is probably unnecessary, but I did it just to show the flexibility you have :slight_smile:


awesome Kirupa, thanks! and thanks for the tutorials too!

one more adjustment I would like to make is calling the timer function on a button click, so the timer starts when the button is clicked and stops when the button is clicked again.

Is this easy to do?