0

I am new to react and feel this might be a basic question

I am trying to get NFTs of the user wallet and trying to map it.

But I am getting the below error

Server Error Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Below is my logic

  import Link from 'next/link';
  import { useWeb3Context } from '../../context'
  import { Web3Button } from '../../components';
  import axios from 'axios';
  import React, { useEffect, useState } from 'react';
  import NFTContainer from '@/components/NFTContainer';



  const renderNotConnectedContainer = () => (
      <Web3Button/>
    );


  export const ChooseProductView = async () => {
      const { address } = useWeb3Context()
      

      if(!address){
        return renderNotConnectedContainer()
      }

      else{
        
          const nfts = await axios.get(`https://ethereum-api.rarible.org/v0.1/nft/items/byOwner?owner=${address}`);
      
          console.log(nfts.data)


          return(   
        
              <div className="flex items-center justify-center">
              <div className="border-grey md: w-full rounded-xl border sm:max-w-xl md:max-w-2xl">
                <div className="flex flex-row justify-between py-2 px-6">
                  <span className="md:text-md text-left text-sm font-light lg:text-lg">
                    Address
                  </span>
                  <span className="md:text-md truncate pl-4 text-right text-sm  font-light lg:text-lg">
                    {address}
                  </span>
                </div>
                
                <NFTContainer nfts={nfts}/>

              </div>
              
            </div>
            

            )

      }
      
    };

I am further trying to use map as below

import React from "react";
import NFTCard from "./NFTCard";

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

export default NFTContainer

Thanks in advance

rohit
  • 159
  • 12
  • 1
    for all async operations including fetch you should use `useEffect` hook for functional components a componentDidMount lifecycle method for a class based component. Please read the documentation https://reactjs.org/docs/hooks-effect.html – Drag13 Jun 19 '22 at 12:58
  • Where are you using `ChooseProductView`? Because it is async it returns a Promise so if you are trying to use it as a component directly it will fail with the warning you show. You need to include an example of how you are calling `ChooseProductView` for more concrete help. – pilchard Jun 19 '22 at 13:00
  • @pilchard yes i am using it as a component for a main page --```import { Web3Button, Web3Address } from '../components/' import { ChooseProductView } from '../views/ChooseProduct'; export const ChooseProduct = () => { return(
    ); } export default ChooseProduct ``` yes making it async is giving me a problem, how do i solve this though, i need the value from the axios request that needs an await     – rohit Jun 19 '22 at 13:03
  • 1
    see: [How to call an async function inside a UseEffect() in React?](https://stackoverflow.com/questions/56838392/how-to-call-an-async-function-inside-a-useeffect-in-react) – pilchard Jun 19 '22 at 14:14

0 Answers0