T
TanStack•3y ago
like-gold

How call useQuery inside jsx with params

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>
  );
}
2 Replies
like-gold
like-gold•3y ago
Maybe here you can use the checkIsOwner inside BoardCard, instead of inside the map loop.
secure-lavender
secure-lavender•3y ago
What is the query? checkIsOwner? If so, I'd suggest doing the above and performing the query in the component itself

Did you find this page helpful?