web: ReactJS: Creating a class that changes the value for a property stored in state by an amount passed in using props

Here is some code that produces a functioning example, it should work if you open it in firefox (I had problems with chrome).

When you click a button, the number beside count is incremented by the value displayed on the button (either 1, 5 or 10).

Code which produces Desired Output

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React tutorial</title>
    <script src="https://unpkg.com/react@0.14.7/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@0.14.7/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <link rel="stylesheet" type="text/css" href="lesson5challengestyling.css">
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">

    var CounterChallenge = React.createClass({
      getInitialState: function() {
        return {
          count: 0
        }
      },
      incrementCountByOne: function(value) {
        this.setState({
          count: this.state.count + 1
        })
      },
      incrementCountByFive: function() {
        this.setState({
          count: this.state.count + 5
        })
      },
      incrementCountByTen: function() {
        this.setState({
          count: this.state.count + 10
        })
      },
      render: function() {
        return (
          <div className="container">
            <h1>Count: {this.state.count}</h1>
            <button className="btn blue-btn" onClick={this.incrementCountByOne}>Add 1</button>
            <button className="btn green-btn" onClick={this.incrementCountByFive}>Add 5</button>
            <button className="btn purple-btn" onClick={this.incrementCountByTen}>Add 10</button>
          </div>
        )
      }
    });

    ReactDOM.render(
      <CounterChallenge />,
      document.getElementById('app')
    );
    </script>
  </body>
</html>

-----------------------------------------------------------------------

I am trying to write this program in a different way, by creating a button class which only has one increment function(instead of increment1, increment5, increment10 like you can see in the code above.)

I would like the code below to perform exactly as the code above.

I am initialing the state of a variable called count in the the core class(Challenge) which react renders to the DOM. Within the class ChallengeButton, I am incrementing the value stored in count(by either 1, 5 or 10 depending on what value is passed in the variable incCount)

I am not sure what is wrong with it, all I really know is that my browser displays a blank white screen. When I inspect the element I receive no helpful information.

My Program(Which I would like to debug)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React tutorial</title>
        <script src="https://unpkg.com/react@0.14.7/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@0.14.7/dist/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <link rel="stylesheet" type="text/css" href="lesson5challengestyling.css">
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">

    var CounterChallenge = React.createClass({
      getInitialState: function() {
        return {
          count: 0
        }
      },
      incrementCountByOne: function(value) {
        this.setState({
          count: this.state.count + 1
        })
      },
      incrementCountByFive: function() {
        this.setState({
          count: this.state.count + 5
        })
      },
      incrementCountByTen: function() {
        this.setState({
          count: this.state.count + 10
        })
      },
      render: function() {
        return (
          <div className="container">
            <h1>Count: {this.state.count}</h1>
            <button className="btn blue-btn" onClick={this.incrementCountByOne}>Add 1</button>
            <button className="btn green-btn" onClick={this.incrementCountByFive}>Add 5</button>
            <button className="btn purple-btn" onClick={this.incrementCountByTen}>Add 10</button>
          </div>
        )
      }
    });

    ReactDOM.render(
      <CounterChallenge />,
      document.getElementById('app')
    );
    </script>
  </body>
</html>

-----------------------------------------------------------------------

Accompanying CSS file(Needs no debugging)

body {
  padding: 40px;
  font-family: "helvetica neue", sans-serif;
}

.container {
  width: 600px;
  margin: auto;
  color: black;
  padding: 20px;
  text-align: center;
}
.container h1 {
  margin: 0;
  padding: 20px;
  font-size: 36px;
}
.container .btn {
  border: 0;
  padding: 15px;
  margin: 10px;
  width: 20%;
  font-size: 15px;
  outline: none;
  border-radius: 3px;
  color: #FFF;
  font-weight: bold;
}

.btn.blue-btn {
  background-color: #55acee;
  box-shadow: 0px 5px 0px 0px #3C93D5;
}

.btn.blue-btn:hover {
   background-color: #6FC6FF;
}

.btn.blue-btn {
  background-color: #55acee;
  box-shadow: 0px 5px 0px 0px #3C93D5;
}

.btn.blue-btn:hover {
   background-color: #6FC6FF;
}

.btn.green-btn {
  background-color: #2ecc71;
  box-shadow: 0px 5px 0px 0px #15B358;
}

.btn.green-btn:hover {
  background-color: #48E68B;
}

.btn.purple-btn {
  background-color: #9b59b6;
  box-shadow: 0px 5px 0px 0px #82409D;
}

.btn.purple-btn:hover {
  background-color: #B573D0;
}

web

dimanche 9 juin 2019

ReactJS: Creating a class that changes the value for a property stored in state by an amount passed in using props

-----------------------------------------------------------------------

-----------------------------------------------------------------------

Aucun commentaire:

Enregistrer un commentaire