Cannot read properties of undefined (reading 'map') at NFTContainer for nft collection

Question

So im making a function in react that enables me to connect my react page with my metamask and display my nfts that ive purchaed on opensea onto my webpage once logged in but im facing an error of

Cannot read properties of undefined (reading 'map') at NFTContainer

The error is occurring in NftContainer its saying undefined reading of map but I'm sure I've defined it if you know where I've gone wrong in this please help and drop a solution down below I was expecting to see the names of Nfts I have in my metamask to show nothing but the error is now appearing

import { cleanup } from '@testing-library/react';
import { NoEthereumProviderError } from '@web3-react/injected-connector';
import { useEffect, useState } from 'react';
import './nft.css'
import NFTContainer from './NFTContainer'

export function Nft() {

    const [walletAddress, setWalletAddress] = useState(null)
    const [nfts, setNfts] = useState()

    const connectWallet = async () => {
        if (typeof window.ethereum !== 'undefined') {

            const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });

            setWalletAddress(accounts[0])
        }
    }

    const getNftData = async () => {

        if (!walletAddress) return;

        const response = await fetch(`https://api.rarible.org/v0.1/items/byOwner/?owner=ETHEREUM:${walletAddress}`)

        const data = await response.json()

        debugger
    }

    useEffect(() => {
        getNftData()
    }, [walletAddress])


    return (
        <div className='Nft'>
            <div className='text'>
                Account: {walletAddress}
            </div>
            <button className='connect-button' onClick={connectWallet}>
                Connect Wallet
            </button>
            <NFTContainer nfts={nfts} />
        </div>
    );
}
export default Nft;

import React from 'react'
import NFTCard from './NFTCard'

const NFTContainer = ({ nfts }) => {

    let nftToRender;
    return (
        <div>
            {nftToRender = nfts.map((nft, index) => {
                return <NFTCard nft={nft} key={index} />
            })}

        </div>
    )
}

export default NFTContainer

import React from 'react'

const nftCard = ({ nft }) => {

    return (
        <div>
            {nft.meta.name}
        </div>
    )
}

export default nftCard

Answer 1

Because the value is undefined. This is the only place you use .map():

{nftToRender = nfts.map((nft, index) => {
    return <NFTCard nft={nft} key={index} />
})}

And that nfts variable comes from props:

const NFTContainer = ({ nfts }) => {

Which is provided to the component:

<NFTContainer nfts={nfts} />

Which is defined in state:

const [nfts, setNfts] = useState()

And since it's never given a value, it's undefined.

You can define it with a default value of an empty array:

const [nfts, setNfts] = useState([])

This should eliminate the error, allowing .map() to just be called on an empty array and quietly not iterate over anything.

---

Of course, you probably also want to get actual data for it at some point. In the same component where that state is maintained you are making an AJAX call, but never do anything with this result:

const data = await response.json()

Is data the new array you want to use? In that case you'd set it to the state:

setNfts(data);

Or if some property on data is what you want:

setNfts(data.someProperty);

Either way, in order to update the state to the new value you'll need to call setNfts at some point.