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?