React Counter

Goal: Create a simple React counter using hooks and event handling.

💡 Solution Hint

To create a counter you will need:

State: Use the useState hook to store the current counter value.
Event Handlers: Create functions to increment and decrement the counter value.
Conditional Logic: Add a check so the counter doesn’t go below 0.
Rendering: Display the current counter value and buttons to change it.

// Example of using useState
const [count, setCount] = useState(0);
 
// Example event handler
const increment = () => {
  setCount(count + 1);
};

👀 Solution

import React, { useState } from 'react';
 
export default function Counter() {
  // Initialize counter state with initial value 0
  const [count, setCount] = useState(0);
 
  // Function to increment the counter value
  const increment = () => {
    setCount(count + 1);
  };
 
  // Function to decrement the counter value, but not below 0
  const decrement = () => {
    if (count > 0) {
      setCount(count - 1);
    }
  };
 
  return (
    <div style={{ textAlign: 'center', margin: '20px' }}>
      <h2>Counter</h2>
      <div style={{ fontSize: '24px', margin: '10px' }}>{count}</div>
      <div>
        <button 
          onClick={increment}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: '#4CAF50',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          +
        </button>
        <button 
          onClick={decrement}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: '#f44336',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          -
        </button>
      </div>
    </div>
  );
}

Solution Analysis:

State: We use the useState hook to create the count state with an initial value of 0.
Event Handlers: We create increment and decrement functions to change the counter value.
Conditional Logic: In the decrement function, we check that the counter value is greater than 0 so as not to decrease it below zero.
Styling: We add basic styles to improve the component’s appearance.
Accessibility: We use semantic HTML elements and clear labels for buttons.

Task Description

You need to create a simple React counter component. The component should display the current counter value and provide buttons to increment and decrement it.

Key requirements:

The initial counter value should be 0
The ”+” button should increment the value by 1
The ”-” button should decrement the value by 1
The counter value should not become negative

Examples

// Basic counter component example
<Counter /> // Displays 0 and + and - buttons
 
// After clicking the + button
// Displays 1 and + and - buttons
 
// After clicking the - button
// Displays 0 and + and - buttons

Requirements

The component should be named Counter
Use the useState hook to manage state
Implement event handlers for buttons
Add a check so the counter doesn’t become negative
Component styling is welcome but not required

Task Description

Examples

Requirements

React Counter

Task Description

Examples

Requirements

🧑‍💻 It's not a bug! It's a feature!