# modify code for React Dealing with State app

**URL:** <https://forum.kirupa.com/t/modify-code-for-react-dealing-with-state-app/636771>\
**Category:** programming\
**Created:** [June 15, 2017, 8:21pm UTC](https://forum.kirupa.com/t/modify-code-for-react-dealing-with-state-app/636771 "2017-06-15T20:21:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![webguync](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/webguync/32/2434_2.png) [@webguync](https://forum.kirupa.com/u/webguync)\
**Post date:** [June 15, 2017, 8:21pm UTC](https://forum.kirupa.com/t/modify-code-for-react-dealing-with-state-app/636771/1 "2017-06-15T20:21:35Z")

</div>

Hi,

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](https://forum.kirupa.com/uploads/short-url/u7GeduPyzI7ZfJCxxnBFd9RruaU.html) (2.4 KB)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 16, 2017, 5:07pm UTC](https://forum.kirupa.com/t/modify-code-for-react-dealing-with-state-app/636771/2 "2017-06-16T17:07:06Z")

</div>

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>
<html>
<head>
<title>Learning React</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<style type="text/css">
  body {

  font-family: sans-serif;
}

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

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

</style>
</head>
<body>
<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) {
      this.setState({
        countDown: this.state.countDown - 1
      });
    } else {
      finished = true;
      clearInterval(intervalID);
    }
  },
  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 (
      <div>
        <h1 style={counterStyle}>{count}</h1>
        {firstText}
        {secondText}
        {thirdText}
      </div>
    );
  }
});

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,
          ...commonStyle
        },
        smallEmphasis: {
          ...commonStyle
        },
        small: {
          fontSize: 17,
          opacity: 0.5,
          ...commonStyle
        }
      }

      return(
        <div style={divStyle}>
          <CountDown textStyles={textStyles}/>
        </div>
      );
    }
});

ReactDOM.render(
  <CountDownDisplay/>,
  document.querySelector("#container")
);

</script>

</body>
</html>

```

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 🙂

Cheers.  
Kirupa

---

<div class="post-metadata">

**Author:** ![webguync](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/webguync/32/2434_2.png) [@webguync](https://forum.kirupa.com/u/webguync)\
**Post date:** [June 16, 2017, 7:13pm UTC](https://forum.kirupa.com/t/modify-code-for-react-dealing-with-state-app/636771/3 "2017-06-16T19:13:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![webguync](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/webguync/32/2434_2.png) [@webguync](https://forum.kirupa.com/u/webguync)\
**Post date:** [June 18, 2017, 6:51pm UTC](https://forum.kirupa.com/t/modify-code-for-react-dealing-with-state-app/636771/4 "2017-06-18T18:51:28Z")

</div>

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?
