react .. insert dynamic dom and show hide element

import React, { useState } from 'react';

import 'bootstrap/dist/css/bootstrap.min.css';

import Toast from 'react-bootstrap/Toast'; // For toast JavaScript functionality

function CounterApp() {

  const [count, setCount] = useState(0); // State to keep track of count

  const [showNotification, setShowNotification] = useState(false); // State to show/hide notification

  // Update handleClick to accept a value parameter

  const handleClick = (value) => {

    const newCount = count + value; // Increment by the passed value

    setCount(newCount);

    // Check if the number is even

    if (newCount % 2 === 0) {

      setShowNotification(true); // Show notification if even

    } else {

      setShowNotification(false); // Hide notification if odd

    }

  };

  return (

    <div className="counter-app">

      {/* Pass 1 as a parameter to handleClick */}

      <button onClick={() => handleClick(1)} className="btn btn-primary">

        Click Me (Current Count: {count})

      </button>

      {/* Conditionally render the notification when count is even */}

      {showNotification && (

        <Toast>

        <Toast.Header>

          <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />

          <strong className="me-auto">Bootstrap</strong>

          <small>11 mins ago</small>

        </Toast.Header>

        <Toast.Body>Be cautious you are now in even zone. The Even number is {count}</Toast.Body>

      </Toast>

      )}

    </div>

  );

}

export default CounterApp;