trainReact.com

Problem List

||

7. Implement a Counter

Easy
Category: State Management
State ManagementuseState

Problem Description

You are provided with a pre-built display component, and your task is to create the container component that manages the state and implements the increment and decrement functionality.

Requirements

  1. The initial count should be 0
  2. The increment button should increase the count by 1
  3. The decrement button should decrease the count by 1
  4. The count should never go below 0

Example

When the component is rendered, it should look similar to this:

1[-]0[+]
2

After clicking the increment button twice:

1[-]2[+]
2

After clicking the decrement button once:

1[-]1[+]
2

When the count is 0, the decrement button should be disabled:

1[-](disabled)0[+]
2
import React, {useState} from 'react';
import CounterDisplay from './CounterDisplay.js';

export default function CounterContainer() {
  // TODO: Count State (initial 0)
  const count= 0;

  // TODO: Implement increment function
  const increment = () => null;

  // TODO: Implement decrement function
  const decrement = () => null;

  return <CounterDisplay increment={increment} decrement={decrement} count={count}/>
}

Open browser consoleTests