Update conditional rendering of SelectedDates

src/components/Schedule/SelectedDates.js

@@ -26,13 +26,15 @@ export default function SelectedDates() {
 
 	useEffect(() => {
 		// Update selected dates
-		let updatedDates = eventsToDates(eventsList)
-		setDatesList(updatedDates)
-		console.log(eventsList)
+		let updatedDates = eventsToDates(eventsList);
+		setDatesList(updatedDates);
 	}, [eventsList]);
 
 	const handleDelete = (date) => {
-		let currentEvent = { start: date.toFormat('yyyy-MM-dd'), display: 'background' }
+		let currentEvent = {
+			start: date.toFormat('yyyy-MM-dd'),
+			display: 'background',
+		};
 
 		// Find the event corresponding to the date
 		let selectedEventIndex;
@@ -48,12 +50,13 @@ export default function SelectedDates() {
 		eventsList.splice(selectedEventIndex, 1);
 		let updatedEvents = [...eventsList];
 		// Update the eventsList
-		setEventsList(updatedEvents)
-	}
+		setEventsList(updatedEvents);
+	};
 
-	if (datesList.length  > 0) {
 	return (
 		<>
+			{datesList.length > 0 && (
+				<div>
 					<h3>Dates selected</h3>
 					<ul>
 						{datesList.map((date) => (
@@ -70,29 +73,30 @@ export default function SelectedDates() {
 							</li>
 						))}
 					</ul>
+				</div>
+			)}
 		</>
 	);
-	} else {
-		return(<></>)
 }
-}
-
 
 // Convert events to Luxon Datetime objects
 const eventsToDates = (events) => {
-	let dates = []
+	let dates = [];
 	events.forEach((event) => {
 		dates.push(DateTime.fromFormat(event.start, 'yyyy-MM-dd'));
 	});
-	return dates
-}
+	return dates;
+};
 
 // Convert Luxon Datetime objects to events
 const datesToEvents = (dates) => {
-	let events = []
+	let events = [];
 	dates.forEach((date) => {
-		let event = { start: date.toFormat('yyyy-MM-dd'), display: 'background' }
+		let event = {
+			start: date.toFormat('yyyy-MM-dd'),
+			display: 'background',
+		};
 		events.push(event);
 	});
-	return events
-}
+	return events;
+};