How can I get the value of an element onClick in React and use it as condition

I’m a beginner in react, I have a calendar with one month that I’ve created using </table/> tag, The concept that I’m working on is when I click on a random day I want to create an event and submit it, but if there is already an event inside this day I want to show the overview of the event that has been created in this day(like google calendar).

I’ve created a function handlerClick to toggle the form to create an event and also a function to submit an event. but I didn’t know how to write the logic of giving the user the right the create only one event on a specific day in the calendar or if there is an event I want to show the overview of that existed event.

← My Calendar Compoennts–>

import React,{useState} from 'react';
import Day from './Day';

const Calendar = () => {
    const [eventForm, showEventFrom] = useState(false);
    const [eventName, setEventName] = useState("");
    const [eventList, setEventList] = useState([]);
    //Submit function
    const submitHandle = (e) => {

      if(!eventName) {
          alert("Please Enter a name for Your Event")
      else {
        const newEvent = {id : new Date().getTime().toString(), title: eventName}
        setEventList([... eventList, newEvent]);

    //Show Event Function
    const handleEvent = () => {

    return (
      <table className="table-calendar" >
        <th colspan="7">January</th>


        <Day day="1" onClick={handleEvent}/>
        <Day day="2" onClick={handleEvent}/>
        <Day day="3" onClick={handleEvent}/>
        <Day day="4" onClick={handleEvent}/>
        <Day day="5" onClick={handleEvent}/>
        <Day day="6" onClick={handleEvent}/>
        <Day day="7" onClick={handleEvent}/>

        <Day day="8" onClick={handleEvent}/>
        <Day day="9" onClick={handleEvent}/>
        <Day day="10" onClick={handleEvent}/>
        <Day day="11" onClick={handleEvent}/>
        <Day day="12" onClick={handleEvent}/>
        <Day day="13" onClick={handleEvent}/>
        <Day day="14" onClick={handleEvent}/>

        <Day day="15" onClick={handleEvent}/>
        <Day day="16" onClick={handleEvent}/>
        <Day day="17" onClick={handleEvent}/>
        <Day day="18" onClick={handleEvent}/>
        <Day day="19" onClick={handleEvent}/>
        <Day day="20" onClick={handleEvent}/>
        <Day day="21" onClick={handleEvent}/>

        <Day day="22" onClick={handleEvent}/>
        <Day day="23" onClick={handleEvent}/>
        <Day day="24" onClick={handleEvent}/>
        <Day day="25" onClick={handleEvent}/>
        <Day day="26" onClick={handleEvent}/>
        <Day day="27" onClick={handleEvent}/>
        <Day day="28" onClick={handleEvent}/>

        <Day day="29" onClick={handleEvent}/>
        <Day day="30" onClick={handleEvent}/>
        <Day day="31" onClick={handleEvent}/>

      {eventForm ? (<form className="event-form" onSubmit={submitHandle}>
          <h3>Create an event</h3>
          <input type="text" 
                 placeholder="Event Name" 
                 onChange={(e)=> setEventName(}/>

           <div className="btn-container">
            <button type="submit"
            <button className="btn">Delete</button>
      </form>) : ""}

export default Calendar;

← My Day Components–>

import React from 'react'

const Day = ({day, onClick}) => {
    return (
        <td onClick={onClick}>{day}</td>    

export default Day

Your post has nothing to do with MongoDB.

You will be better served on a different forum. May be React has their own forum. Other stackoverflow can be useful.