title: .map is not a function react, axios problem
body: <p>I am having a bit of a problem using the map function.</p>
  <p>In the below code I am fetching NFT data through a rarible api using Axios (Works perfectly fine, I get a promise with the object as a response)</p>
  <pre><code>import Link from 'next/link'
  import { useWeb3Context } from '../../context'
  import { Web3Button } from '../../components'
  import axios from 'axios'
  import React, { useState } from 'react'
  import NFTContainer from '@/components/NFTContainer'
  
  const renderNotConnectedContainer = () =&gt; &lt;Web3Button /&gt;
  
  const fetchOwnedTokens = async (owner) =&gt; {
    try {
      const result = await axios.get(`https://ethereum-api.rarible.org/v0.1/nft/items/byOwner?owner=${owner}`)
  
      return [result.data.items]
    } catch (err) {
      console.error(err)
      return []
    }
  }
  
  export const ChooseProductView = () =&gt; {
    const { address } = useWeb3Context()
  
    if (!address) {
      return renderNotConnectedContainer()
    } else {
      const data = fetchOwnedTokens(address)
      console.log(data)
  
      return (
        &lt;div className=&quot;flex items-center justify-center&quot;&gt;
          &lt;NFTContainer nfts={data} /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  </code></pre>
  <p>Then I am trying to pass the response to a container file using props, but I get an error --Unhandled Runtime Error
  TypeError: nfts.map is not a function
  which I think is because NFTs are not of an array datatype. Any suggestions, please? Have been stuck for a while</p>
  <pre><code>import React from 'react'
  import NFTCard from './NFTCard'
  
  const NFTContainer = ({ nfts }) =&gt; {
    return (
      &lt;div&gt;
        {nfts.map((nft, index) =&gt; (
          &lt;NFTCard nft={nft} key={index} /&gt;
        ))}
      &lt;/div&gt;
    )
  }
  
  export default NFTContainer
  
  </code></pre>