Why can't I check the checkboxes?

Question

I'm using logic to check my checkboxes. The functionality allows you to check the parent checkbox and all the children are checked. You can also check or uncheck an individual checkbox. My problem is that after implementing this logic, the checkboxes don't work. When I click on them, they are not marked.

export default function UserList() {
  const [page, setPage] = useState(1);

  const { data, isLoading, isFetching, error } = useUsers(page);

  const [isCheckAll, setIsCheckAll] = useState(false);
  const [isCheck, setIsCheck] = useState([]);

  const handleSelectAll = (e) => {
    setIsCheckAll(!isCheckAll);
    setIsCheck(data.users.map((li) => li.id));
    if (isCheckAll) {
      setIsCheck([]);
    }
  };

  const handleClick = (e) => {
    const { id, checked } = e.target;
    setIsCheck([...isCheck, id]);
    if (!checked) {
      setIsCheck(isCheck.filter((item) => item !== id));
    }
  };

  console.log({isCheck});

  async function handlePrefetchUser(userId: string) {
    await queryClient.prefetchQuery(
      ['user', userId],
      async () => {
        const response = await api.get(`users/${userId}`);

        return response.data;
      },
      {
        staleTime: 1000 * 60 * 10,
      }
    );
  }

  return (
    <Box>
      <Header />

      <Flex my="6" maxWidth={1480} mx="auto" w="94%">
        <Sidebar />

        <Box flex="1" borderRadius={8} bg="gray.800" p="8" overflow="hidden">
          <Flex mb="8" justify="space-between" align="center">
            <Heading size="lg" fontWeight="normal">
              Alunos
              {!isLoading && isFetching && (
                <Spinner size="sm" color="gray.500" ml="4" />
              )}
            </Heading>

            <HStack spacing={4}>
              <NextLink href="/users/create" passHref>
                <Button as="a" size="sm" fontSize="sm" colorScheme="orange">
                  <Icon as={RiAddLine} fontSize="20" />
                </Button>
              </NextLink>

              <NotificationModal />

              <Button
                as="a"
                size="sm"
                fontSize="sm"
                colorScheme="blue"
                cursor="pointer"
              >
                <Icon as={CgImport} fontSize="20" />
              </Button>
            </HStack>
          </Flex>

          {isLoading ? (
            <Flex justify="center" align="center">
              <Spinner />
            </Flex>
          ) : error ? (
            <Flex justify="center">
              <Text>Falha ao obter dados dos usuários.</Text>
            </Flex>
          ) : (
            <>
              <Table colorScheme="whiteAlpha" overflow="none" size="md">
                <Thead>
                  <Tr>
                    <Th px={['4', '4', '6']} color="gray.300">
                      <Checkbox
                        colorScheme="orange"
                        onClick={handleSelectAll}
                        isChecked={isCheckAll}
                      />
                    </Th>

                    <Th w="100%">Alunos</Th>
                    <Th>Ações</Th>
                    {/* <Th w="8"></Th> */}
                  </Tr>
                </Thead>

                <Tbody>
                  {data.users.map((user, index) => (
                    <Tr key={user.id}>
                      <Td px={['4', '4', '6']}>
                        <Checkbox
                          key={user.id}
                          colorScheme="orange"
                          onClick={handleClick}
                          isChecked={isCheck.includes(user)}
                        />
                      </Td>

Answer 1

I guess problem is that you are trying to get id form event object, and event does not have it.

const { id, checked } = e.target;

Second thing is that you are storing ids im state but then you are trying to check if that state includes user object.

isChecked={isCheck.includes(user)}

You should pass that id to handleChange function.

<Checkbox
  key={user.id}
  colorScheme="orange"
  onClick={(e) => handleClick(e, user.id)}
  isChecked={isCheck.includes(user.id)}
/>

Then you van change handleChange to something like this

const handleClick = (e, id) => {
  const { checked } = e.target;
  
  if (checked) {
    setIsCheck((prev) => [...prev, id])
  } else {
    setIsCheck((prev) => prev.filter((item) => item !== id));
  }
};