Son
Son2y ago

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>
);
}
3 Replies
mozzius
mozzius2y 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
mozzius2y 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
Son
Son2y ago
Thank you for the clarification!