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
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([]).
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