ItemTable.jsx:29 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at ItemTable.jsx:29:33
    at Array.map (<anonymous>)
    at ItemTable (ItemTable.jsx:19:16)
    at renderWithHooks (chunk-6BKLQ22S.js?v=02d47215:11548:26)
    at updateFunctionComponent (chunk-6BKLQ22S.js?v=02d47215:14582:28)
    at beginWork (chunk-6BKLQ22S.js?v=02d47215:15924:22)
    at HTMLUnknownElement.callCallback2 (chunk-6BKLQ22S.js?v=02d47215:3674:22)
    at Object.invokeGuardedCallbackDev (chunk-6BKLQ22S.js?v=02d47215:3699:24)
    at invokeGuardedCallback (chunk-6BKLQ22S.js?v=02d47215:3733:39)
    at beginWork$1 (chunk-6BKLQ22S.js?v=02d47215:19765:15)
chunk-6BKLQ22S.js?v=02d47215:14032 The above error occurred in the <ItemTable> component:

    at ItemTable (http://localhost:5173/src/components/ItemTable.jsx?t=1728538355771:18:29)
    at div
    at ListItemsPage (http://localhost:5173/src/pages/ListItemsPage.jsx?t=1728538355771:24:29)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=e153bbf1:4092:5)
    at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=e153bbf1:4531:5)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=e153bbf1:4474:15)
    at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=e153bbf1:5219:5)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
chunk-6BKLQ22S.js?v=02d47215:19413 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at ItemTable.jsx:29:33
    at Array.map (<anonymous>)
    at ItemTable (ItemTable.jsx:19:16)
    at renderWithHooks (chunk-6BKLQ22S.js?v=02d47215:11548:26)
    at updateFunctionComponent (chunk-6BKLQ22S.js?v=02d47215:14582:28)
    at beginWork (chunk-6BKLQ22S.js?v=02d47215:15924:22)
    at beginWork$1 (chunk-6BKLQ22S.js?v=02d47215:19753:22)
    at performUnitOfWork (chunk-6BKLQ22S.js?v=02d47215:19198:20)
    at workLoopSync (chunk-6BKLQ22S.js?v=02d47215:19137:13)
    at renderRootSync ( import express from "express";
import cors from "cors";

const app = express();
app.use(cors());
app.use(express.json());

let warehouseItems = [
 {
  id: "1",
  name: "Laptop",
  category: "Electronics",
  quantity: 5,
  location: "Warehouse A",
  supplier: "TechCorp",
  supplierLocation: "New York",
  price: 1200,
  endpoints: [
   { endpoint: "Endpoint 1", status: "Pending" },
   { endpoint: "Endpoint 2", status: "Delivered" },
  ],
 },
 {
  id: "2",
  name: "Office Chair",
  category: "Furniture",
  quantity: 15,
  location: "Warehouse B",
  supplier: "FurniturePro",
  supplierLocation: "San Francisco",
  price: 350,
  endpoints: [
   { endpoint: "Endpoint 1", status: "Delivering" },
   { endpoint: "Endpoint 2", status: "Delayed" },
  ],
 },
 {
  id: "3",
  name: "Tennis Racket",
  category: "Sports",
  quantity: 20,
  location: "Warehouse C",
  supplier: "SportingGoods",
  supplierLocation: "Chicago",
  price: 150,
  endpoints: [
   { endpoint: "Endpoint 1", status: "Pending" },
   { endpoint: "Endpoint 2", status: "Canceled" },
  ],
 },
];

app.get("/items", (req, res) => {
 res.json(warehouseItems);
});

app.post("/items", (req, res) => {
 const newItem = { id: warehouseItems.length + 1, ...req.body };
 warehouseItems.push(newItem);
 res.status(201).json(newItem);
});

app.put("/items/:id", (req, res) => {
 const id = parseInt(req.params.id);
 const updatedFields = req.body;
 warehouseItems = warehouseItems.map((item) => (item.id === id ? { ...item, ...updatedFields } : item));
 res.json({ message: "Item updated" });
});

const PORT = 5000;
app.listen(PORT, () => {
 console.log(`Server running on port${PORT}`);
}); import { Link } from 'react-router-dom';

export const ItemTable = ({ items }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Category</th>
          <th>Quantity</th>
          <th>Location</th>
          <th>Supplier</th>
          <th>Supplier Location</th>
          <th>Endpoints</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {items.map(item => (
          <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.category}</td>
            <td>{item.quantity}</td>
            <td>{item.location}</td>
            <td>{item.supplier}</td>
            <td>{item.supplierLocation}</td>
            <td>
              <ul>
                {item.endpoints.map((endpoint, index) => (
                  <li key={index}>{`${endpoint.endpoint} - ${endpoint.status}`}</li>
                ))}
              </ul>
            </td>
            <td>
              <Link to={`/edit/${item.id}`}>Edit</Link>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};