TypeError: cardsData.map is not a function

Question

I am supposed to store queries for users in the cardsData and I need to map through the data in cardsData but if I run the code on my terminal i get this error. I am a newbie and I have searched a lot of forums that suggest that cardsData is supposed to be an array but I do not know how to go forward from there. I am just following a youTube tutorial and that was exactly what was done in the tutorial. it worked on the youTube why can’t it work for me too?

please somebody help.

[enter image description here][1]import { useContext } from 'react'
import { TinderContext } from '../context/TinderContext'
import { SiTinder } from 'react-icons/si'
import CardHeader from './CardHeader'
import CardFooter from './CardFooter'
import TinderCardItem from './TinderCardItem'

const style = {
  wrapper: `h-[45rem] w-[27rem] flex flex-col rounded-lg overflow-hidden`,
  cardMain: `w-full flex-1 relative flex flex-col justify-center items-center bg-gray-500`,
  noMoreWrapper: `flex flex-col justify-center items-center absolute`,
  tinderLogo: `text-5xl text-red-500 mb-4`,
  noMoreText: `text-xl text-white`,
  swipesContainer: `w-full h-full overflow-hidden`,
}

const Card = () => {
  const { cardsData } = useContext(TinderContext)

  return (
    <div className={style.wrapper}>
      <CardHeader />
      <div className={style.cardMain}>
        <div className={style.noMoreWrapper}>
          <SiTinder className={style.tinderLogo} />
          <div className={style.noMoreText}>
            No More Profiles in your Location...
          </div>
        </div>
        <div className={style.swipesContainer}>
          {cardsData.map((card, index) => (
            <TinderCardItem card={card} key={index} />
          ))}
        </div>
      </div>
      <CardFooter />
    </div>
  )
}

export default Card

I just edited this post and below is my TinderContext

 import { useState, createContext, useEffect } from 'react'
    import faker from '@faker-js/faker'
    import { useMoralis } from 'react-moralis'
    
    export const TinderContext = createContext()
    export const TinderProvider = ({ children }) => {
        const { authenticate, isAuthenticated, user, Moralis } = useMoralis()
        const [cardsData, setCardsData] = useState([])
        const [currentAccount, setCurrentAccount] = useState()
        const [currentUser, setCurrentUser] = useState()
    
        useEffect(() => {
            checkWalletConnection()
        
            if (isAuthenticated) {
              requestUsersData(user.get('ethAddress'))
              requestCurrentUserData(user.get('ethAddress'))
            }
          }, [isAuthenticated])
    
        const checkWalletConnection = async () => {
            if (isAuthenticated) {
              const address = user.get('ethAddress')
              setCurrentAccount(address)
              requestToCreateUserProfile(address, faker.name.findName())
            } else {
                setCurrentAccount('')
              }
            }
          
            const connectWallet = async () => {
                if (!isAuthenticated) {
                    try {
                      await authenticate({
                        signingMessage: 'Log in using Moralis',
                      })
                    } catch (error) {
                      console.error(error)
                    }
                  }
                
            }
            const disconnectWallet = async () => {
                await Moralis.User.logOut()
                setCurrentAccount('')
              }
    
              const handleRightSwipe = async (cardData, currentUserAddress) => {
                const likeData = {
                  likedUser: cardData.walletAddress,
                  currentUser: currentUserAddress,
                }
    
                try {
                  await fetch('/api/saveLike', {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json',
    
                },
                body: JSON.stringify(likeData),
    
              })
              const response = await fetch('/api/checkMatches', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(likeData),
            }
              )
            
            const responseData = await response.json()
            const matchStatus = responseData.data.isMatch
    
            if (matchStatus) {
              console.log('match')
    
            const mintData = {
              walletAddresses: [cardData.walletAddress, currentUserAddress],
              names: [cardData.name, currentUser.name],
            }
    
            await fetch('/api/mintMatchNft', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(mintData),
            })
          }
        } catch (error) {
          console.error(error)
        }
      }
    
            
               
    const requestToCreateUserProfile = async (walletAddress, name) => {
                try {
                  await fetch(`/api/createUser`, {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                      userWalletAddress: walletAddress,
                      name: name,
                    }),
                    
                  })
                } catch (error) {
                  console.error(error)
                }
              }
    
     const requestCurrentUserData = async walletAddress => {
                try {
                  const response = await fetch(
                    `/api/fetchCurrentUserData?activeAccount=${walletAddress}`,
                  )
                  const data = await response.json()
            
                  setCurrentUser(data.data)
                } catch (error) {
                  console.error(error)
                }
              }
              const requestUsersData = async activeAccount => {
                try {
                  const response = await fetch(
                    `/api/fetchUsers?activeAccount=${activeAccount}`,
                  )
                  const data = await response.json()
            
                  setCardsData(data.data)
                } catch (error) {
                  console.error(error)
                }
              }
      
    
        return(
            <TinderContext.Provider
                value={{ connectWallet,
                    disconnectWallet,
                    cardsData,
                    currentAccount,
                    currentUser,
                    handleRightSwipe
                  }}
                >{children}
            </TinderContext.Provider>
        )
    }

Answer 1

It's very likely your state cardsData is not being initialized correctly as an [] or its been set wrongly to a value different than an Array. Hard to go further than this without TinderContext code