TypeError: Cannot read properties of undefined (reading 'map') while setting up MetaMask to display NFT

Question

I keep getting this error when I run my code Uncaught TypeError: Cannot read properties of undefined (reading 'map') I am tring to set up a Metamask which displays the users NFTS that they have purchased from OpenSea when they connect their metamask account I'll show my code to show what I have done and if anyone knows how to fix this could they post a solution code as this would be of so much help.

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

        setNfts(data.items)
    }

    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 }) => {

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

export default NFTContainer

So when I put in the nft.meta.name I keep getting the uncaught type error and wondering as to why this error keeps appearing

import React from 'react'

const NFTCard = ({ nft }) => {

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

export default NFTCard

Answer 1

the problem is you defined your useState like this

const [nfts, setNfts] = useState()

So if you don't define any value to your state then by default it is undefined and you can't map through undefined value, so define your state like this

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 () => {
    try {
      if (typeof window.ethereum !== 'undefined') {
        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
        setWalletAddress(accounts[0]);
      }
    } catch (error) {
      console.log('err1==>', error);
    }
  };

  const getNftData = async () => {
    try {
      if (!walletAddress) return;
      const response = await fetch(`https://api.rarible.org/v0.1/items/byOwner/?owner=ETHEREUM:${walletAddress}`);
      const data = await response.json();
      setNfts(data.items);
    } catch (error) {
      console.log('err2==>', error);
    }
  };

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

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

Note: Also do error handling and show loader when API is fetching data from network or from chain

Answer 2

You are missing the initial value here,

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

You must use the default value while using the useState()hook. If you want to apply array.map() method on state value then have to declare hook with empty array useState([]).