TypeError: Cannot read property 'map' of undefined

hi
why I am getting this error.

TypeError: Cannot read property 'map' of undefined

Contacts

C:/Users/Awais Hassan/Downloads/contactmanager/TASK/src/components/contacts/Contacts.js:18

any help

Code

import React, { useEffect } from "react";
import { connect } from "react-redux";
import Contact from "./Contact";
import PropTypes from "prop-types";
import { getContacts } from "../../actions/contactActions";

function Contacts() {
  useEffect(() => {
    getContacts();
  });

  const { contacts } = getContacts();
  return (
    <>
      <h1 className='display-4 mb-2'>
        <span className='text-danger'>Contact</span> List
      </h1>
      {contacts.map((contact) => (
        <Contact key={contact.id} contact={contact} />
      ))}
    </>
  );
}

const mapStateToProps = (state) => ({
  contacts: state.contact.contacts,
});

export default connect(
  mapStateToProps,
  { getContacts }
)(Contacts);

It is telling you that when it is trying to evaluate this:

      {contacts.map((contact) => (

contacts is undefined. You cannot access a property on undefined (or null) and it throws an error.

So, either getContacts isn’t working properly, or it is is getting data asynchronously. If the latter is the case, common solutions would be to put:

if (!contacts() {
  return null;
}

in your render method. (or some spinner or loading screen or whatever)

Or you could do something like:

      {contacts && contacts.map((contact) => (

which would prevent that map function from trying to run if contacts is undefined (or anything falsy, technically.)