React JS TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Question

I'm trying to run the code on localhost but I receive error and cannot move forward to coding

    import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import {BsThreeDotsVertical} from 'react-icons/bs'
import { coins } from '../static/coins'
import Coin from './Coin'
import BalanceChart from './BalanceChart'

const Portfolio = ({ thirdWebTokens, sanityTokens, walletAddress }) => {
 const [walletBalance, setWalletBalance] = useState(0)
 const tokenToUSD = {}

for (const token of sanityTokens)
{
  tokenToUSD[token.contractAddress] = Number(token.usdPrice)
}

useEffect(() => {
  const calculateTotalBalance = async () => {
    const totalBalance = await Promise.all(thirdWebTokens.map(async token => {
      const balance = await token.balanceOf(walletAddress)
      return Number(balance.displayValue)*tokenToUSD[token.address]
    })
    )
    setWalletBalance(totalBalance.reduce((acc, curr) => acc+curr,0))
  }
  return calculateTotalBalance(), [thirdWebTokens]
}
)
return ( 
<Wrapper>
  <Content>
    <Chart>
      <div>
        <Balance>
          <BalanceTitle>Portfolio balance</BalanceTitle>
          <BalanceValue>
            {'$'}
            { walletBalance.toLocaleString() } 
          </BalanceValue>
        </Balance>
      </div>
      <BalanceChart/>
    </Chart>
    
  <PortfolioTable>
    <TableItem>
        <Title>Your Assets</Title>
    </TableItem>
    <Divider/>
    <Table>
      <TableItem>
        <TableRow>
          <div style={{flex: 3}}>Name</div>
          <div style={{flex: 2}}>Balance</div>
          <div style={{flex: 1}}>Price</div>
          <div style={{flex: 1}}>Allocation</div>
          <div style={{flex: 0}}>
            <BsThreeDotsVertical/>
          </div>
        </TableRow>
      </TableItem>
      <Divider/>
      <div>
        {coins.map(coin => (
          // eslint-disable-next-line react/jsx-key
          <div>
          <Coin coin={coin} />
          <Divider/>
          </div>
        ))}
      </div>
    </Table>
</PortfolioTable>
</Content>
</Wrapper>
)
}
export default Portfolio

const Wrapper = styled.div`
  flex: 1;
  display: flex;
  justify-content: center;
  height: 100%;
`
const Content = styled.div`
  width: 100%;
  max-width: 1000px;
  padding: 2rem 1rem;
`
const Chart = styled.div`
  border: 1px solid #282b2f;
  padding: 1rem 2rem;
`
const Balance = styled.div``
const BalanceTitle = styled.div`
  color: #8a919e;
  font-size: 0.9rem;
`

const BalanceValue = styled.div`
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0.5rem 0;
`
const PortfolioTable = styled.div`
  margin-top: 1rem;
  border: 1px solid #282b2f;
`
const Table = styled.div`
  width: 100%;
`
const TableRow = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;

  & > th {
    text-align: left;
  }
`
const TableItem = styled.div`
  padding: 1rem 2rem;
`

const Divider = styled.div`
  border-bottom: 1px solid #282b2f;
`
const Title = styled.div`
  font-size: 1.5rem;
  font-weight: 600;
`

And the error I receive

I also follow the Clever Programmer's Coinbase web3 clone video and I've checked from the video but I couldn't see difference. All the code worked successfully until I added the code block. What can I do to fix this issue brothers? Thank you

I also added Portfolio compenent to Main.js with the code below

import React from 'react'
import Portfolio from './Portfolio'
import styled from 'styled-components'
import Promos from './Promos'

const Main = ({thirdWebTokens, sanityTokens, walletAddress}) => {
  return <Wrapper>
      <Portfolio 
      walletAddress={walletAddress} 
      sanityTokens={sanityTokens} 
      ThirdWebTokens={ThirdWebTokens}/>
      <Promos />
  </Wrapper>
}

export default Main

const Wrapper = styled.div`
  display: flex;
  max-height: calc(100vh - 64px);
  overflow: hidden;
  overflow-y: scroll;
  ::-webkit-scrollbar {
    display: none;
  }

  & div {
    border-radius: 0.4rem;
  }
`

Answer 1

Capitalization mismatch in the variables can cause the issue I experienced. Just need to check all the variables.