Another products list page with fetch
Thu Oct 07 2021 05:11:12 GMT+0000 (Coordinated Universal Time)
Saved by
@rook12
#javascript
import "./Reservations.css";
import React, { useState, useEffect } from "react";
import { formatDate } from "../utils/formatDate";
import { Link } from "react-router-dom";
const ReservationList = () => {
const [reservationList, setReservationList] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
const response = await fetch("http://localhost:5000/reservations");
const data = await response.json();
setReservationList(data);
setIsLoading(false);
};
fetchData();
}, []);
if (isLoading) {
return <p>Loading...</p>;
}
return (
<>
<h1 className="upcoming-reservations">Upcoming reservations</h1>
<ul className="reservation-list">
{reservationList.map((reservation) => {
return (
<li key={reservation.id} className="reservation">
<h2 className="name-grid-item">{reservation.restaurantName}</h2>
<p className="date-grid-item">{formatDate(reservation.date)}</p>
<Link
to={`/reservations/${reservation.id}`}
className="view-details"
>
View details →
</Link>
</li>
);
})}
</ul>
</>
);
};
export default ReservationList;
content_copyCOPY
Comments