React Credit Card Expiry Date Validation

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

function App() {
      const [state, setState] = useState({
        expiryDate: '',
        showError: false,
        showSuccess: false,
        errorMessage: '',
        successMessage: '',
        showEmptyError: false,
      });

const { expiryDate, showError, showSuccess, errorMessage, successMessage, showEmptyError } = state;

const formatExpiryDate = () => {
        let formattedDate = expiryDate.replace(/\D/g, '');

if (formattedDate.length > 2) {
          formattedDate = formattedDate.slice(0, 2) + '/' + formattedDate.slice(2);
        }

setState({ ...state, expiryDate: formattedDate });
      };

const validateExpiryDate = () => {
        const currentYear = new Date().getFullYear() % 100;
        const currentMonth = new Date().getMonth() + 1;

if (expiryDate === '') {
          setState({
            ...state,
            showError: false,
            showSuccess: false,
            showEmptyError: true,
            errorMessage: 'Input field required',
          });
        } else {
          const enteredYear = parseInt(expiryDate.slice(3), 10);
          const enteredMonth = parseInt(expiryDate.slice(0, 2), 10);

if (
            enteredYear < currentYear ||
            (enteredYear === currentYear && enteredMonth < currentMonth) ||
            enteredMonth < 1 ||
            enteredMonth > 12
          ) {
            setState({
              ...state,
              showError: true,
              showSuccess: false,
              showEmptyError: false,
              errorMessage: 'Invalid expiry date',
            });
          } else {
            setState({
              ...state,
              showError: false,
              showSuccess: true,
              showEmptyError: false,
              successMessage: 'Valid expiry date',
            });
          }
        }
      };

return (
        <div className='container'>
          <h3>React Validate Credit Card Expiry Date | Debit card</h3>
          <input
            type="text"
            className={`expiry-input ${showError ? 'error' : ''}`}
            value={state.expiryDate}
            onChange={(e) => setState({ ...state, expiryDate: e.target.value })}
            onBlur={formatExpiryDate}
            placeholder="Expiry Date (MM/YY)"
            maxLength={5}
          />
          <div className={`message ${showSuccess ? 'success' : ''}`}>
            {showError
              ? errorMessage
              : showEmptyError
                ? 'Input field required'
                : successMessage}
          </div>
          <button className="validate-button" onClick={validateExpiryDate}>Validate</button>
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById('app'));
  </script>

h3 {
      font-size: 1.5rem;
      margin-bottom: 15px;
    }

.expiry-input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 1rem;
      transition: border-color 0.3s;
      box-sizing: border-box;
    }

.expiry-input.error {
      border-color: #e74c3c;
    }

.message {
      margin-top: 10px;
      font-size: 0.9rem;
      color: #333;
    }

.message.success {
      color: #2ecc71;
    }

.validate-button {
      display: block;
      width: 100%;
      margin-top: 20px;
      padding: 10px;
      background-color: #3498db;
      color: #fff;
      border: none;
      border-radius: 5px;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s;
    }

.validate-button:hover {
      background-color: #2980b9;
    }
  </style>
</body>

</html>