TypeError: Cannot read properties of undefined (reading 'map')

Question

Hello Everyone Here is my next js code actually I try to fetch the event data from smart contract but when I mapping the data this error is occur TypeError: Cannot read properties of undefined (reading 'map')Can anyone help me to fix this error.

'use client'
import React, { useEffect, useState } from 'react'
import campaignFactory from '../../artifacts/contracts/campaign.sol/campaignFactory.json';
import { ethers } from 'ethers';
const Home = ({AllData}) => {
  const [filter,setFilter]=useState(AllData);
  useEffect(()=>{
    filter.map((e)=>{

      console.log(e.title);
    })
  },[]);
  return (
    <div>
      <button onClick={()=>setFilter(AllData)}></button>
      </div>
  )
}


export async function getStaticProps() {
  const provider = new ethers.providers.JsonRpcProvider(
    process.env.NEXT_PUBLIC_RPC_URL
  );

  const contract = new ethers.Contract(
    process.env.NEXT_PUBLIC_ADDRESS,
    campaignFactory.abi,
    provider
  );

  const getAllCampaigns = contract.filters.campaignCreated();
  const AllCampaigns = await contract.queryFilter(getAllCampaigns);
  const AllData = AllCampaigns.map((e) => {
    return {
      title: e.args.title,
      image: e.args.imgUrl,
    }
  });
  return {
    props: {
      AllData,
    },
    revalidate: 10
  }

}
export default Home

Answer 1

You are setting your state with setFilter at the press of the button "onClick()" but you are mapping the state as soon as the components are rendered with useEffect. See useEffect documentation for more information.

You can try to create a new function that sets your state and then maps it, and call that in the onClick().

Answer 2

'use client'
import React, { useEffect, useState } from 'react'
import campaignFactory from '../../artifacts/contracts/campaign.sol/campaignFactory.json';
import { ethers } from 'ethers';
const Home = ({AllData}) => {
  const [filter,setFilter]=useState([]);

const getAllData = () => {
  setFilter(AllData);
}

const showAllCampaigns = () => (
  filter.map((item)=>console.log(item))
)

  return (
    <div>
      <button onClick={()=>setFilter(AllData)}></button>
      {filter.length > 0 ? showAllCampaigns: null}
      </div>
  )
}