TypeError: cardsData.map is not a function

Moralis General
#1

ERROR
ERROR1214×566 57.9 KB

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.

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
#2

what you get if you add console.log("cardsData " + JSON.stringify(cardsData)) ?

#3

what do you have in that file '../context/TinderContext' ?

#4

this 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>
    )
}
#5

Please, tell me where exactly i would add the it within the code

#6

you could try this way:

 <div className={style.swipesContainer}>
          {console.log("cardsData " + JSON.stringify(cardsData))}
          {"cardsData " + JSON.stringify(cardsData)}
        </div>
#7

hello this did not work. it just printed “cardsData []” when i ran it on local host using “yarn dev”. please i there any other suggestion?

#8

For the map is not a function issue, map needs to be run on an array.

What are you trying to map over onto TinderCardItem e.g. what sort of data is card meant to be?

Show a log cardsData in your outer component and start from there.

#9

the data are to be pulled through an API route code below

import { client } from '../../lib/sanity'

const getUserInfo = async (req, res) => {
    try {
        const query = `
          *[_type == "users" && _id != "${req.query.activeAccount}"]{
              name,
              walletAddress,
              "imageUrl": profileImage.asset->url
            }
        `
        
    const sanityResponse = await client.fetch(query)

    res.status(200).send({ message: 'success', data: sanityResponse })
    
} catch (error) {
        res.status(500).send({ message: 'error', data: error.message })
      }


}
export default getUserInfo