Son•2y 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•2y 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•2y 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

SonOP•2y ago

Thank you for the clarification!