Help with displaying API response information

[thiagofive]

Hello, I am calling the API for getWalletNFTs to get the user information and display on the website, but since the user has more than one token I wish I could display this information for all the tokens, and wish that the values were separated by ", ".

To call the API I am using:

    await Moralis.start({ apiKey: process.env.MORALIS_API_KEY });

    const nftList = await Moralis.EvmApi.nft.getWalletNFTs({
        address: session.user.address,
        tokenAddresses: ["xxxxxxxxxxxxxxxxxxxxx"],
        chain: 5
    }); 

    return {
        props: {
            nftList: nftList.raw.result,
        },
...

And to display the information I am using inside the return:

...
return (
<Text as={"span"} align="left" fontSize={{ base: '10px', md: '15px', lg: '20px' }}>. 
   <b>Token ID:</b> 
   {nftList.map((nftList) => 
     (<span>{nftList.token_id}</span>
   ))}
</Text>
)
...

But using this code I am getting this result:

Token ID: 3210

How can I manage the response from the API so that I could get the following result?

Token ID: 0,1,2,3

or even better:

Token ID: 0,1,2 and 3.

[alex]

Try one of the solutions here for the last example because that’s what you’re looking for.

[thiagofive]

I took the last example from the post and adapted it to my project but I got an error…

                            <div>
                                    {this.props.data.map((token_id, nftList) => {
                                        if (nftList === this.props.data.length - 1)
                                            return (
                                                <span key={`${nftList}`}>{(nftList ? ', and "' : '"') + token_id}"</span>
                                            );
                                        return <span key={`${nftList}`}>{(nftList ? ', "' : '"') + token_id}"</span>;
                                    })}
                            </div>

The error:

Do you know what it could be?

[alex]

You have to adjust it completely for your own code. E.g. you’re mapping over nftList instead of this.props like in that example.