Why is this TypeError: Cannot read properties of undefined (reading 'map') throwing up on my browser?

Question

I dont no I just deleted a file and all of a sudden this error is appearing which is impossible to solve .pls check my code. I had tried adding an edit form to edit my reservations but thats something else.As soon as I deleted that form and all its associated stuff this weird error is popping up Reservation.js

import { useState,useEffect } from "react";
import ReservationCard from "./ReservationCard";

function MyReservations({user,reservations,setReservations}){
   
    useEffect(()=>{
        fetch("/reservations")
        .then(res=>res.json())
        .then(reservationData=>{
          setReservations(reservationData)
        })
      },[])

     
    return(
        <>
       
        {reservations.map((reservation)=>(
        <ReservationCard key={reservation.id} reservation={reservation}  />
        
       ))

       }
        </>
    )
}
export default MyReservations;

App.js

import './App.css';

import { useEffect,useState } from 'react';
import About from './components/About'
import Navbar from './components/Navbar';
import Restaurants from './components/Restaurants';
import Loggin from './components/Loggin';
import RestaurantInfo from './components/RestaurantInfo';
import MyReservations from './components/MyReservations';
import { Route,Routes } from 'react-router-dom';
import Blogs from './components/Blogs';

function App() {
  const [user, setUser] = useState(null);

 
 
 
  useEffect(() => {
    document.title = "Nyc";
  }, []);

 
 
  
  useEffect(() => {
    // auto-login
    fetch("/me", { credentials: "same-origin" }).then((r) => {
      if (r.ok) {
        r.json().then((user) => setUser(user));
      }
    });
  }, [setUser]);


  if (!user) return <Loggin error={'please login'} onLogin={setUser} />;
  return (
    <div className="App">
   <Navbar user={user} setUser={setUser} />
   <Routes>
    <Route exact path="/blogs" element={<Blogs />} />
  
    <Route exact path="/myreservations" element={<MyReservations user={user}  />} />

   <Route exact path="/restaurants/:id" element= {<RestaurantInfo user={user} />}  />

      <Route exact path="/restaurants" element={<Restaurants />} />

     <Route exact path="/about" element={<About user={user} />} />

   </Routes>
   
    </div>
  );
}

export default App;

Answer 1

reservations is undefined in the MyReservations component. Either pass defined reservations and setReservations props to MyReservations or declare reservations state in MyReservations. I suggest the latter.

Example:

function MyReservations({ user }){
  const [reservations, setReservations] = React.useState([]);
 
  useEffect(() => {
    fetch("/reservations")
      .then(res => res.json())
      .then(reservationData => {
          setReservations(reservationData)
      });
  }, []);
     
  return (
    <>
      {reservations.map((reservation) => (
        <ReservationCard
          key={reservation.id}
          reservation={reservation}
        />
      ))}
    </>
  );
}