Trying to fetch <select> from array in React

Question

I am trying to fetch a dropdown select list from an array:

Select user ids from a smart contract:

const [ownerIds, setOwnerIds] = useState(null);
useEffect(() => {
  const checkOwners = async () => {
    if (ethereum) {
      //MetaMask injects a Web3 Provider as "web3.currentProvider", exposes the ethers.js Provider API.
      const provider = new ethers.providers.Web3Provider(ethereum);
      //There is only ever up to one account in MetaMask exposed
      const signer = provider.getSigner();
      const nftContract = new ethers.Contract(contractAddress, abi, signer);      
        if (currentAccount !== null && nftContract !== null) {
          let ownerTokenId = await nftContract.tokensOfOwner(currentAccount);
            if(ownerTokenId.length > 0) {
              setTokenId(true);              
              setOwnerIds(ownerTokenId.toString().split(','));              
            } else {
                setTokenId(false);              
              }           
        }
    }
  };
  checkOwners()
},[currentAccount,ethereum]);

Here is the function I did trying to map the ids.

        <select>
          {ownerIds.map((id) => {return<option>{id.ownerIds}</option>})}
          {console.log(ownerIds)}
        </select>

This is the console.log result:

(3) ['70', '71', '73']
0: "70"
1: "71"
2: "73"
length: 3
[[Prototype]]: Array(0)

My dropdown list is showing 3 blank options, and if I just print ownerIds it returns 707173.

ownerIds is not an array of objects. How do you want to access ownerIds property of id in the map method? I guess it should be return <option>{id}</option>? — User456
– User456, Commented Jul 12, 2022 at 12:32

lpizzinidev · Accepted Answer · 2022-07-12 12:32:31Z

2

You should show the id directly since ownerIds is an array of strings:

<select>
  {ownerIds.map((id) => {
    return <option key={id}>{id}</option>;
  })}
</select>;

answered Jul 12, 2022 at 12:32

lpizzinidev

13.3k2 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ppm.eth Over a year ago

Worked like a charm! I'll set it as answered when it allows me, thank you!

Collectives™ on Stack Overflow

Trying to fetch <select> from array in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related