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

Other MongoDB Topics
1

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([]);
    console.log(eventList);
    
    //Submit function
    const submitHandle = (e) => {
      e.preventDefault();

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

    //Show Event Function
    const handleEvent = () => {
      showEventFrom(!eventForm)
    }

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

        <tr>
        <th>S</th>
        <th>M</th>
        <th>T</th>
        <th>W</th>
        <th>T</th>
        <th>F</th>
        <th>S</th>
        </tr>

        <tr>
        <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}/>
        </tr>

        <tr>
        <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}/>
        </tr>

        <tr>
        <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}/>
        </tr>

        <tr>
        <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}/>
        </tr>

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

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

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

export default Calendar;

← My Day Components–>

import React from 'react'

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

export default Day
2

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.