TypeError: undefined is not an object (evaluating 'reminder.map')

Question

this is my reminder-list.tsx, how many time i tricked it, i always fail to do that, how to fix it

i always got the TypeError: undefined is not an object (evaluating 'reminder.map') error

import { ReminderDetails } from "@/types/types";
import React from "react";

interface ReminderListProps {
  reminder: ReminderDetails[];
}

const ComponentReminderList: React.FC<ReminderListProps> = ({ reminder }) => {
  return (
    <tbody>
      {reminder.map((item, index) => (
        <tr key={index}>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.patient}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.medicine}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.dosage} - {item.dosage_unit}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.schedule}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.notes}
          </td>
        </tr>
      ))}
    </tbody>
  );
};

export default ComponentReminderList;

Answer 1

The error says in other words that you can't read properties of undefined.

the reminder prop is somehow undefined and passed as undefined in the parent component. you should check where you used your ComponentReminderList component and check the props you passed.

Edit: I removed the early check of props because they will never be undefined since they are not optional in props interface