How to call useQuery with params inside JSX

How can i achieve this? Thanks
export function MemberQueryList({ list }: Props) {

function checkIsOwner(housingAssociationId: string, memberId: string) {
const isOwner = trpc.housingAssociation.checkIfOwner.useQuery({
housingAssociationId,
memberId,
});

return isOwner.data?.ok ?? false;
}
const navigate = useNavigate();
const userId = getSubFromLocalStorage() ?? "";
return (
<div>
{list.map((housingAssociation: listData) => {
const isOwner = checkIsOwner(housingAssociation.id, housingAssociation.userId);
return (
<BoardCard
key={housingAssociation.id}
onClick={() => {
navigate(
`/housing_associations/association?name=${housingAssociation.name}&id=${housingAssociation.id}`
);
}}
state={housingAssociation}
isOwner={isOwner}
/>
);
})}
</div>
);
}
export function MemberQueryList({ list }: Props) {

function checkIsOwner(housingAssociationId: string, memberId: string) {
const isOwner = trpc.housingAssociation.checkIfOwner.useQuery({
housingAssociationId,
memberId,
});

return isOwner.data?.ok ?? false;
}
const navigate = useNavigate();
const userId = getSubFromLocalStorage() ?? "";
return (
<div>
{list.map((housingAssociation: listData) => {
const isOwner = checkIsOwner(housingAssociation.id, housingAssociation.userId);
return (
<BoardCard
key={housingAssociation.id}
onClick={() => {
navigate(
`/housing_associations/association?name=${housingAssociation.name}&id=${housingAssociation.id}`
);
}}
state={housingAssociation}
isOwner={isOwner}
/>
);
})}
</div>
);
}
mozzius
mozzius426d ago
You’re not following the rules of hooks! https://legacy.reactjs.org/docs/hooks-rules.html
Rules of Hooks – React
A JavaScript library for building user interfaces
mozzius
mozzius425d ago
In short, you should move your useQuery hook to inside <BoardCard> Basically, you can’t call a hook inside a loop (because react then can’t tell which one is which). So you need to move the logic to the top level of a component, and from the look of your code you should just pass userId to <BoardCard> and have it check isOwner inside there Also - you’ve written a function checkIsOwner. You can call hooks inside functions you write, but you must then treat that function like a hook. In your case, you’d want to rename it to useHousingAssocIsOwner(assocId, userId) and then move it to the top level of a component
A Dan
A Dan425d ago
Thank you for the clarification!
More Posts
Sharing EnumOn the backend: I have colocated files with types and procedures (index.ts - procedures, schemas.ts Meta - unable to create default metaTrying to follow https://trpc.io/docs/server/metadata#default-meta-chaining-and-shallow-merging I setrpc/react-query batchingHi. How do you deal with batching? If I don't put any maxURLLength then I get an error 404 since it middleware error with minimal-react examplehello! I tried to use the minimal-react version, but I get an error - it says that `'middleware'` dohow to use the same Zod validation both client and server's procedure inputWhen submitting forms, I need the same validation. How to reduce the repeated code?pipe/unstable_pipeI cant seem to find it? according to the docs I can chain middlewares using pipe in v10 but the featImplementation of bi-directional cursor-based paginationI'm looking at the [example](https://trpc.io/docs/useInfiniteQuery#example-react-component) for `useHow to ignore `input` validation and just pass in an object with interfaces?For my input I just want to pass in an interface rather than using a Zod schema. Either that or if sWhere can I add a query key?I tried to follow as in useQuery from Tanstack, but Typescript started complaining ```js api.promptsasync inside link next handler possible ?Hey everyone, Today I had to do a bit of refactor, and I'm wondering something. I had to turn a syntRPC doesn't support redirectI use tRPC & @trpc/server/adapters/express. procdure.query({ctx: { res }} => { res.redirect('xxHow to get external key other than INPUT from RESTFUL request?SSO callback my api like api/trpc/user.login?token=abc