introduction

here we are creating to button to increase and decrease the state and then if the count is less than 1 or the count is more than 10 we are displaying message to the user that this is not possible.

import React, { useState } from 'react'
import { ClipboardCheck } from 'react-bootstrap-icons'

const First = () => {
  const [counter, setCounter] = useState(0)
  const [message, setMessage] = useState('No message for user')

  const increment = (e) => {
    if (counter > 10) {
      setMessage('user cannot have more than 10 items')
    } else setCounter(counter + 1)
  }

  const decrement = () => {
    if (counter < 1) {
      setMessage('user cannot have less then 1 items')
    } else setCounter(counter - 1)
  }
  return (
    <div>
      <h1>Count : {counter} </h1>
      <button onClick={(e) => increment(e)}>Increment</button>

      <button onClick={(e) => decrement(e)}>Decrement</button>

      <p>{message}</p>
    </div>
  )
}

export default First

// First create a button and increase the counter on Click
// Then cratea a button to decrement the counter
// if the count is greater than 10 show a message to the user that the count is greater than 10