Qwik JS: child components when looping through does not react to state changes properly

48 Views Asked by At

I have the following code as a route:

export const EditMembers = component$(() => {
  const t = useTranslate();
  const group = useGroup();
  const groupMembers = useGroupMembers();
  const members = useMembers();
  const selectedMembers = useSignal<MembersRecord[]>(
    groupMembers.value.map(
      (groupMember) => groupMember.member as MembersRecord,
    ),
  );
  const selectedMemberIds = useComputed$<string[]>(() =>
    selectedMembers.value.map((member) => member.id),
  );
  const membersToShow = useComputed$(() => {
    const unselectedMembers = members.value.filter(
      (member) => !selectedMemberIds.value.includes(member.id),
    );
    return [...selectedMembers.value, ...unselectedMembers];
  });

  const handleSelectMember = $((member: MembersRecord) => {
    const alreadySelected = !!selectedMemberIds.value.find(
      (memberId) => memberId === member.id,
    );
    if (alreadySelected) {
      selectedMembers.value = selectedMembers.value.filter(
        (selectedMember) => selectedMember.id !== member.id,
      );
    } else {
      selectedMembers.value = [...selectedMembers.value, member];
    }
  });

  if (!group.value) {
    return (
      <Page title={t("app.errors.notFound@@Not found")}>
        {t("groups.errors.groupDoesNotExist@@This group does not exist.")}
      </Page>
    );
  }

  return (
    <Page title={group.value.name!}>
      {membersToShow.value.map((member, i) => {
        return (
          <ListTile
            key={member.id}
            color={
              selectedMemberIds.value.includes(member.id)
                ? colors.secondary
                : colors.primary
            }
            onClick$={() => handleSelectMember(member)}
            title={`${member.firstName} ${member.lastName}`}
            isLastItem={i >= members.value.length - 1}
          />
        );
      })}
    </Page>
  );
});

When I click on a ListTile component to select or unselect a member, the ordering of the list and the selectedMembers update correctly. But the ListTile props like isLastItem and color does not react to the state changes. If I use tailwind classes instead of the color prop it still does not work.

Why is this happening?

0

There are 0 best solutions below