Hi @wind grotto. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#React hooks help
main vaultBOT
Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain specific details about the useContractRead hook or how to handle the data it returns.
However, based on general React and JavaScript principles, you could map over the array returned by the first useContractRead call and for each item, extract the address and use it in subsequent useContractRead calls.
Please refer to the Next.js documentation or the specific documentation for the useContractRead hook for more detailed information.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
wind grotto
@main vault So this is my directory -
And I want to do something like call
const { data, isLoading } = useContractRead(contract, "getContestants", [id]);
which will get me all the contestants and then by their i want to get their address which is data[3] and then call this
const { data, isLoading } = useContractRead(contract, "getContestant", [id, cid])
for each of the contestant address so i can see their number of votes
Is their any solution to my dilemma ;-;
This is the array which
const { data, isLoading } = useContractRead(contract, "getContestants", [id]);
returns :
[
[
{
"type": "BigNumber",
"hex": "0x03"
},
"https://i.pinimg.com/564x/9d/52/21/9d5221762042c2ecff288efab22730ec.jpg",
"Anuu",
"0x872Edfe2d75AAc27E5CaDA6dAa80D350879596DD",
{
"type": "BigNumber",
"hex": "0x00"
},
[]
],
[
{
"type": "BigNumber",
"hex": "0x04"
},
"https://i.pinimg.com/564x/9d/52/21/9d5221762042c2ecff288efab22730ec.jpg",
"Abhi",
"0xA88Ce2Ae4cA574d9E1E7cfad960A71274C14a503",
{
"type": "BigNumber",
"hex": "0x00"
},
[]
]
]```
I want those address
```0x872Edfe2d75AAc27E5CaDA6dAa80D350879596DD and 0xA88Ce2Ae4cA574d9E1E7cfad960A71274C14a503``` and then call the getContestant function with each of emLet me check the knowledge base for you. One moment! :books:
I'm sorry, but the information extracts provided do not contain specific details about the useContractRead hook or how to handle the data it returns.
However, based on general React and JavaScript principles, you could map over the array returned by the first useContractRead call and for each item, extract the address and use it in subsequent useContractRead calls.
Please refer to the Next.js documentation or the specific documentation for the useContractRead hook for more detailed information.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
wind grotto
@main vault So this is my directory -
And I want to do something like call
const { data, isLoading } = useContractRead(contract, "getContestants", [id]);
which will get me all the contestants and then by their i want to get their address which is data[3] and then call this
const { data, isLoading } = useContractRead(contract, "getContestant", [id, cid])
for each of the contestant address so i can see their number of votes
Is their any solution to my dilemma ;-;
This is the array which
const { data, isLoading } = useContractRead(contract, "getContestants", [id]);
returns :
[
[
{
"type": "BigNumber",
"hex": "0x03"
},
"https://i.pinimg.com/564x/9d/52/21/9d5221762042c2ecff288efab22730ec.jpg",
"Anuu",
"0x872Edfe2d75AAc27E5CaDA6dAa80D350879596DD",
{
"type": "BigNumber",
"hex": "0x00"
},
[]
],
[
{
"type": "BigNumber",
"hex": "0x04"
},
"https://i.pinimg.com/564x/9d/52/21/9d5221762042c2ecff288efab22730ec.jpg",
"Abhi",
"0xA88Ce2Ae4cA574d9E1E7cfad960A71274C14a503",
{
"type": "BigNumber",
"hex": "0x00"
},
[]
]
]```
I want those address
```0x872Edfe2d75AAc27E5CaDA6dAa80D350879596DD and 0xA88Ce2Ae4cA574d9E1E7cfad960A71274C14a503``` and then call the getContestant function with each of em
This is the code by thirdweb about the contract access
```tsx
import { useContract, useContractRead } from "@thirdweb-dev/react";
export default function Component() {
const { contract } = useContract("0x7194f5404B7E34E8D9A27580a1fe8d63feCFF984");
const { data, isLoading } = useContractRead(contract, "getContestant", [id, cid])
}```
main vaultBOT
Let me check the knowledge base for you. One moment! :books:
Based on the information provided, you can use the useEffect hook from React to call the useContractRead function for each contestant after you have fetched the contestants.
Here's a basic example of how you might do this:
import { useEffect, useState } from 'react';
import { useContract, useContractRead } from "@thirdweb-dev/react";
export default function Component() {
const { contract } = useContract("0x7194f5404B7E34E8D9A27580a1fe8d63feCFF984");
const { data: contestantsData, isLoading: contestantsLoading } = useContractRead(contract, "getContestants", [id]);
const [contestantVotes, setContestantVotes] = useState([]);
useEffect(() => {
if (!contestantsLoading && contestantsData) {
contestantsData.forEach(contestant => {
const { data: contestantData, isLoading: contestantLoading } = useContractRead(contract, "getContestant", [id, contestant[3]]);
if (!contestantLoading && contestantData) {
setContestantVotes(prevVotes => [...prevVotes, contestantData]);
}
});
}
}, [contestantsLoading, contestantsData]);
// Now, `contestantVotes` should contain the vote data for each contestant
}
This code first fetches the contestants, then for each contestant, it fetches their vote data and stores it in the contestantVotes state variable.
Please note that this is a simplified example and may not work exactly as is in your specific use case. You may need to adjust it to fit your needs.
Also, please be aware that calling hooks (like useContractRead) inside loops, conditions, or nested functions is not recommended in React. This is a simplified example to give you an idea of how you might approach this problem. In a real-world application, you might want to use a different approach, such as moving the second useContractRead call into a separate component.
For more information on hooks in React, you can refer to the React documentation (https://react.dev/reference/react/use). For more information on the useContractRead hook, please refer to the documentation provided by Thirdweb.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
wind grotto
@main vault it gives error Unhandled Runtime Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
main vaultBOT
Let me check the knowledge base for you. One moment! :books:
The error message you're seeing is a common one in React when hooks are not used correctly. Hooks are a feature of React that let you use state and other React features without writing a class. They must follow certain rules:
- Only call hooks at the top level: Don’t call hooks inside loops, conditions, or nested functions.
- Only call hooks from React function components: Don’t call hooks from regular JavaScript functions.
The error message "Invalid hook call. Hooks can only be called inside of the body of a function component" typically means one of the following:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
You can find more information about this error and how to resolve it on the React documentation (https://reactjs.org/link/invalid-hook-call).
In the code you provided, it seems like you're calling a hook (useContractRead) inside a loop (forEach). This is not allowed in React. You might need to refactor your code to ensure that hooks are only called at the top level of your React function components.