modify code for React Dealing with State app

programming
1

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 (2.4 KB)

2

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 :slight_smile:

Cheers.
Kirupa

3

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

4

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?