Building a Counter in React without class components

This post has been de-listed

It is no longer included in search results and normal feeds (front page, hot posts, subreddit posts, etc). It remains visible only via the author's post history.

Post Flair (click to view more posts with a particular flair)

Solved

Post Body

I recently started ReactJS and started learning about hooks. For this assignment, we have to create a counter with a few limitations, the biggest one being not being able to use class components. There are a few conditions as well with the counter.

1) Cannot go higher than 20

2) Cannot go lower than 0

3) Have a Reset button appear if the number is different from 0.

4)Change the color of the counter if it is greater than or equal to 10.

I have most of the logic down but my biggest issue currently is the placement of my logic if that makes sense. I am also getting Require() is not defined when implementing my code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello, React!</title>
    <style>
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      button {
        margin: 0.5rem;
      }
      .red {
        background: red;
      }
    </style>
  </head>
  <body>
    <!-- element where application will be rendered -->
    <div id="root"></div>

    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
      class Counter extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
            count: 0,
          };
        }

        handleIncrement = (event) => {
          this.setState((state, props) => ({
            count: state.count   1,
          }));
        };

        handleDecrement = (event) => {
          this.setState((state, props) => ({
            count: state.count - 1,
          }));
        };

        render() {
          return (
            <div>
              <button onClick={this.handleDecrement}>decrement (-)</button>
              {this.state.count}
              <button onClick={this.handleIncrement}>increment ( )</button>
            </div>
          );
        }
      }

      import React, { useState } from "react";
      function UpperLimitIncrement(state, props) {
        return state.count >= 20 ? (state.count = 20) : state.count  ;
      }

      function LowerLimitDecrement(props) {
        return state.count <= 0 ? (state.count = 0) : state.count--;
      }

      function Reset(props) {
        return state.count !== 0 ? (
          <div>
            <button onClick={() => setCount((state.count = 0))}> Reset</button>
          </div>
        ) : (
          <div> </div>
        );
      }

      function SwitchToRed(props) {}

      function NewCounter() {
        const [count, setCount] = useState(0);
        return (
          <div className>
            <button onClick={() => setCount(count   1)}> Increment</button>
            <h1>{count}</h1>
            <button onClick={() => setCount(count - 1)}> Decrement</button>
          </div>
        );
      }

      ReactDOM.render(<NewCounter />, document.getElementById("root"));
    </script>
  </body>
</html>

We were given the class component as a reference point. Everything after the class render is purely my work but I'm not sure why I am getting Require() is not defined. I havent finished the SwitchToRed function yet since I mainly want to get the other stuff done first.

Author

Account Strength

100%

Account Age

5 years

Verified Email

Yes

Verified Flair

Total Karma

9,114

Link Karma

553

Comment Karma

8,165

Profile updated: 2 days ago

Posts updated: 1 month ago

ArcRiseGen

Subreddit

r/learnprogramming

Post Details

We try to extract some basic information from the post title. This is not always successful or accurate, please use your best judgement and compare these values to the post title and body for confirmation.

Posted: 3 years ago
Reddit URL: View post on reddit.com
External URL: reddit.com/r/learnprogra...