How can I show dynamically a component based on the value of the state

user_16686544 0
Viewed 59

I have a calendar, When I click on a day I have a form that pop-up to create an event and then submit this event(run, school, meeting) and I push it to state array(everything works here). but because the user has the right to create Only one event per day. I want to check in the day selected if there is already an event created on this day or not? If Yes I show a pop-up with the name of the event if not I wanna show the form to create a new event.

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, day : keyDay}
        setEventList(newEvent);
        setEventName("");
  
      }
      
    };

handleDayClick function

const handleDayClick = (day) => {

      // here you will check if your `eventList` state has the event for the day.
      const eventExist = eventList.find(event => event.day === day);
      getKeyDay(day);
      
      if(eventExist) {
        showOverviewForm (true);
      } else {
      // show the form with empty fields.
        showEventFrom(true);
        showOverviewForm (false);
      }

     }

Calendar component

const Calendar = () => {
        const monthsData= ["S", "M", "T", "W", "T", "F", "S"];
        const [eventName, setEventName] = useState("");
        const [eventList, setEventList] = useState([]);
        const [eventForm, showEventFrom] = useState(false);
        const [overviewForm, showOverviewForm] = useState(false);
        const [keyDay, getKeyDay] = useState("");
      
    
          return (
        <>
      <table className="table-calendar" >
        <tr>
        <th colspan="7">January</th>
        </tr>

        <tr>
        {month.map((monthEl, index)=> {
          return (
            <th key={index}>{monthEl}</th>
          )
        })}
        </tr>
        

        <tr> 
        <Day day="1" onClick={()=> handleDayClick(1)}/>
        <Day day="2" onClick={()=> handleDayClick(2)}/>
        <Day day="3" onClick={()=> handleDayClick(3)}/>
        <Day day="4" onClick={()=> handleDayClick(4)}/>
        </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>)}
      
      {overviewShown && <Event listEvent={eventList}/> }
    </>
    )
}

export default Calendar;

Event Component

import React from 'react'

const Event = ({list}) => {
    <>
    {list.map((singleEvent)=> {
        // const {title, id, day} = singleEvent;
        return (
            <article className="event-pop-up" key={singleEvent.id} >
                <h1>Event : {singleEvent.title} </h1>
                <h2>Day : {singleEvent.day} </h2>
            </article>
         )
    })}
    </>
}

export default Event

I made a lot of research but I got stuck in this part

This is the link to check out the app https://boring-boyd-ecbeee.netlify.app/

Thank you

reactjs javascript
1 Answers

Well, If the requirement is to have one user -> one event per day then I would do the following:

You will have to check if the user has created the event for the day. So what you can do is, whenever you are clicking on the day, create a handler for that, and then inside that handler, you may check if the user has created the event for the day.

The component code will look like this.

// pass the day which you are clicking on into the handler.
<Day day="1" onClick={()=> handleDayClick(1) }/>
<Day day="2" onClick={()=> handleDayClick(2) }/>

Then create the handler itself.

const handleDayclick = (day) => {
// here you will check if your `eventList` state has the event for the day.
const eventExist = eventList.find(event => event.day === day);
// You might also create one more state to keep track of currently selected Day, that value will be useful in `submitHandle` to understand which day we are on.
if(eventExist) {
// show the form with data filled in ( You can just create the a state to do that. for example: const [formshown, setFormShown] = useState(false);
} else {
// show the form with empty fields.
}
    }

Whenever you are submitting the form, your event object should have the day field which we are checking above in our handler.

{id : new Date().getTime().toString(), title: eventName, day: 1 }

I hope this will help to start with.

user_84662810
Related