CreateEventForm.js

import React, { useState } from "react";
import errorAlert from "../Helpers/errorAlert";
import isEmpty from 'validator/lib/isEmpty';

const CreateEventForm = () => {

    const [errorMsg, setErrorMsg] = useState('')

  const [eventData, setEventData] = useState({
    eventTitle: "",
    organiser: "",
    venueName: "",
    venueAddress: "",
    eventGenre: "",
    startDate: "",
    endDate: "",
    startTime: "",
    endTime: "",
    ticketPrice: "",
    ticketQty: "",
    eventImage: null,
    eventDescription: "",
  });

  // Destructuring form data
  const {
    eventTitle,
    organiser,
    venueName,
    venueAddress,
    eventGenre,
    startDate,
    endDate,
    startTime,
    endTime,
    ticketPrice,
    ticketQty,
    eventImage,
    eventDescription,
  } = eventData;

  const handleEventImage = (event) => {
      console.log(event.target.files[0])
      setEventData({
          ...eventData,
          [event.target.name]: event.target.files[0],
      })
  }

  const handleEventChange = (event) => {
      setEventData({
          ...eventData,
          [event.target.name]: event.target.value
      })
  }

  const handleEventSubmit = (event) => {
      event.preventDefault()

      if (eventImage === null) {
          setErrorMsg("Image is required")
      }

  }

  return (
    <form onSubmit={handleEventSubmit}>
        {JSON.stringify(eventData)}
        {JSON.stringify(errorMsg)}
      <div className="mt-16 mx-20">
        <div className="px-2">
          <div className="flex -mx-2">
            <div className="w-1/2 px-4 ">
              <div className="space-y-6">
                <h1 className=" text-black font-montserrat font-extrabold text-3xl">
                  Create event
                </h1>
                {errorMsg && errorAlert(errorMsg)}
                <input
                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
                  name="eventTitle"
                  value={eventTitle}
                  type="text"
                  placeholder="Event title"
                  onChange={handleEventChange}
                ></input>
                <input
                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
                  name="organiser"
                  value={organiser}
                  type="text"
                  placeholder="organiser"
                  onChange={handleEventChange}
                ></input>
                <input
                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
                  name="venueName"
                  value={venueName}
                  type="text"
                  placeholder="Venue name"
                  onChange={handleEventChange}
                ></input>
                <input
                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
                  name="venueAddress"
                  value={venueAddress}
                  type="text"
                  placeholder="Venue address"
                  onChange={handleEventChange}
                ></input>
                <select
                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
                  name="eventGenre"
                  type="text"
                  placeholder="Event Genre"
                  onChange={handleEventChange}
                >
                  <option value="" disabled="disabled">
                    Pick a genre
                  </option>
                  <option value="Hip-hop">Hip-hop</option>
                  <option value="Rap">Rap</option>
                  <option value="Rock">Rock</option>
                  <option value="Grime">Grime</option>
                  <option value="Pop">Pop</option>
                  <option value="Electronic">Electronic</option>
                  <option value="House">House</option>
                  <option value="Reggae">Reggae</option>
                  <option value="Indie">Indie</option>
                  <option value="Dance<">Dance</option>
                </select>
                <div className="flex space-x-2">
                  <input
                    className="font-montserrat font-medium rounded-full w-1/2 py-4 px-7 shadow-lg"
                    name="startDate"
                    value={startDate}
                    type="text"
                    placeholder="Start date"
                    onChange={handleEventChange}
                  ></input>
                  <input
                    className="font-montserrat font-medium rounded-full w-1/2 py-4 px-7 shadow-lg"
                    name="endDate"
                    value={endDate}
                    type="text"
                    placeholder="End date"
                    onChange={handleEventChange}
                  ></input>
                </div>
                <div className="flex space-x-2">
                  <input
                    className="font-montserrat font-medium rounded-full w-1/2 py-4 px-7 shadow-lg"
                    name="startTime"
                    value={startTime}
                    type="text"
                    placeholder="Start time"
                    onChange={handleEventChange}
                  ></input>
                  <input
                    className="font-montserrat font-medium rounded-full w-1/2 py-4 px-7 shadow-lg"
                    name="endTime"
                    value={endTime}
                    type="text"
                    placeholder="End time"
                    onChange={handleEventChange}
                  ></input>
                </div>
                <input
                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
                  name="ticketPrice"
                  value={ticketPrice}
                  type="text"
                  placeholder="Ticket price"
                  onChange={handleEventChange}
                ></input>
                <input
                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
                  name="ticketQty"
                  value={ticketQty}
                  type="number"
                  min="1"
                  placeholder="Quantity of tickets"
                  onChange={handleEventChange}
                ></input>
              </div>
            </div>
            <div className="w-1/2 px-4">
              <div>
                <div className="flex justify-center mt-16 ">
                  <div className="w-full rounded-lg shadow-xl bg-gray-50 ">
                    <div className="m-6 ">
                      <div className="flex items-center justify-center w-full ">
                        <label className="flex flex-col w-full h-32 border-4 border-blue-200 border-dashed hover:bg-gray-100 hover:border-gray-300">
                          <div className="flex flex-col items-center justify-center pt-7">
                            <p className="pt-1 font-montserrat font-medium text-sm tracking-wider text-gray-400 group-hover:text-gray-600">
                              Attach a file
                            </p>
                          </div>
                          <input
                            type="file"
                            name="eventImage"
                            className="custom-file-input opacity-0"
                            onChange={handleEventImage}
                          />
                        </label>
                      </div>
                    </div>
                    <div className="flex justify-center p-2">
                      <button className="w-full px-4 py-3 font-montserrat font-medium text-white bg-purple-500 rounded shadow-xl">
                        Upload event image
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div className="py-6">
                <textarea
                  name="eventDescription"
                  value={eventDescription}
                  placeholder="Event description"
                  onChange={handleEventChange}
                  className="w-full h-48 px-3 py-4 font-montserrat font-medium text-base border rounded-lg focus:shadow-outline"
                ></textarea>
              </div>
              <button
                className="p-5 px-24 w-full bg-purple-500 hover:bg-purple-400 text-white rounded font-montserrat font-bold"
                type="submit"
              >
                Create event
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  );
};

export default CreateEventForm;