Uncaught TypeError: data.map is not a function -->react component error

Question

Hey I have a little problem in my modal component. The problem is the following error: Uncaught TypeError: meatState.map is not a function Any idea what might be causing this? I appreciate help a lot. And also, the meatState is indeed an array.

Modal.js

import React, { useContext } from "react";
import showModal from "../store/meat-context";
import MeatContext from "../store/meat-context";
import CartItem from "./CartItem";
import styles from "./Modal.module.css";

function Modal() {
  const modal = useContext(showModal);
  const { meatState, dispatchMeatState } = useContext(MeatContext);
  if (!modal.showModal) {
    return null;
  }
  return (
    <div className={styles.backdrop}>
      <div className={styles.modal}>
        {meatState.map((meat) => {
          return (
            <CartItem
              name={meat.name}
              price={meat.price}
              id={meat.id}
              description={meat.description}
            />
          );
        })}
      </div>
    </div>
  );
}

export default Modal;

Answer 1

As others have said meatState must not be an array. it could be null or undefined. You can add this code to where you map is to check if this is your issue.

{meatState !== undefined && meatState.map((meat) => {
          return (
            <CartItem
              name={meat.name}
              price={meat.price}
              id={meat.id}
              description={meat.description}
            />
          );
        })}

or Check the meat state with a useEffect() in your Modal component.

useEffect(() => {
   console.log(meatState)
}, [meatState])