Event handing issue in react

Question

import AppSelect from '@/components/form-fields/AppSelect';
import {
  Box,
  Button,
  CircularProgress,
  Divider,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Stack,
  Typography,
  useTheme,
} from '@mui/material';
import React, { useEffect } from 'react';
import { BlobProvider, PDFDownloadLink } from '@react-pdf/renderer';
import Iconify from '@/components/iconify';
import PaySlipPDF from './paySlipPDF';
import useGet from '@/hooks/useGet';
import { useForm } from 'react-hook-form';
import { useParams } from 'react-router-dom';
import { PAYSTRUCTURE_PAYROLL_LIST_ENDPOINT } from '@/constants/my-company/employee-directory';
import useUserStore from '@/store/user.store';

type PayRoll = {
  year: string;
  month: string;
  monthText: string;
  payrollId: string;
};

const Payslips = () => {
  const theme = useTheme();
  const [selectedIndex, setSelectedIndex] = React.useState(1);
  const [payrollId, setPayrollId] = React.useState('');
  const [list, setlist] = React.useState<PayRoll[] | undefined>([]);
  const { control, watch } = useForm();
  const user = useUserStore((state) => state.user);
  // const {id} = useParams();
  const { data } = useGet<any>(
    PAYSTRUCTURE_PAYROLL_LIST_ENDPOINT (user?.Employee?.id), ['getPayrunListForEmp']
  );

  
  // const options = [...new Set(data?.map((each: { year: any; }) => each.year))].map((each) => ({
  //   label: each,
  //   value: each,
  // }));


  // const year = watch('year');
  // useEffect(() => {
  //   if (data) {
  //     setlist(data?.filter((each: { year: any; }) => each.year === year));
  //   }
  // }, [year, data]);
  
  const options = [...new Set(data?.map((each:any) => each.year))].map((each) => ({
    label: each,
    value: each,
  }));

  const year = watch('year');
  useEffect(() => {
    setlist(data?.filter((each:any) => each.year == year));
  }, [year, data, payrollId]);
  const handleListItemClick = (index: number, id: string) => {
    console.log('Clicked index:', index);
    console.log('Clicked payrollId:', id);
    setSelectedIndex(index);
    setPayrollId(id);
  };
  
  
  // Add your custom styles for the header box
  const headerStyles = {
    display: 'flex',
    flexDirection: 'row',
    width: '70%',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: theme.spacing(2),
    backgroundColor: '#4A5363',
    color: theme.palette.primary.contrastText,
  };
  // console.log('Data:', data);
  // console.log('Options:', options);
  // console.log('List:', list);
  // console.log('Mapped Years:', data?.map((each: { year: any; }) => each.year));
  return (
    <Stack
      sx={{
        display: 'flex',
        flexDirection: 'row',
        margin: 2,
        gap: 2,
        flexWrap: 'wrap',
        height: '100%',

        [theme.breakpoints.down('sm')]: {
          flexDirection: 'column',
        },
      }}
    >
      <Stack
        direction='column'
        sx={{
          width: '250px',
          [theme.breakpoints.down('sm')]: {
            width: '100%',
          },
        }}
        gap={2}
      >
        <AppSelect control={control} name='year' options={options} />
        <Box component='span' sx={{ bgcolor: 'background.paper', flex: 1 }}>
          <List component='nav' aria-label='main mailbox folders'>
            {list?.map((each, idx) => (
              <ListItemButton
                selected={selectedIndex === idx}
                onClick={(event) => handleListItemClick(idx, each.payrollId)}
              >
                <ListItemText primary={each.monthText} />
              </ListItemButton>
            ))}
          </List>
        </Box>
      </Stack>
      <Box sx={{ flex: 1 }}>
        {payrollId ? (
          <PaySlipPDF id={payrollId} />
        ) : (
          <Typography variant='body2'>Select Year and Month </Typography>
        )}
      </Box>
    </Stack>
  );
};

export default Payslips;

From this code there is component AppSelect which is a reusable component on this it have option this option is a value which fetches the value from api and it is mapped in array value , if i select this option it shows years like 2024,2025 which is fetched from api and if i select one of the year it will display the months like jan, feb and march in a list , and shows it in listitembutton everything okay but whenever i click first month like jan it fetched data from api and display payslip pdf in box in same page in first load of the page, aftr i select feb it does not fetches the data like same for all month, i need to fetch data for all month when i click it in first load of page please give me the solution

 const handleListItemClick = (index: number, id: string) => {
    setSelectedIndex(index);
    if (payrollId !== id) {
      setPayrollId(id);
    } else {
      // Reset payrollId if the same month is selected again
      setPayrollId('');
    }
  };

i tried this logic but in this logic payrollid is resetted after when i click each month for three time then only it fetches data so i don't need this behaviour

Answer 1

const handleListItemClick = (index: number, id: string) => {
  setSelectedIndex(index);
  if (payrollId !== id) {
    // If a different month is clicked, reset payrollId and set it again to trigger data fetching
    setPayrollId('');
    setTimeout(() => {
      setPayrollId(id);
    }, 0); // Ensuring the id is set after resetting to trigger the effect
    console.log("Reset payrollId");
  } else {
    // Reset payrollId if the same month is selected again
    setPayrollId('');
    console.log("Reset payrollId");
    // Reset the data since the same month is selected again
    setlist([]);
  }
};

In this adjustment, when a different month is clicked, the payrollId is first reset, and then set again to the clicked id after a small delay. This ensures that the effect is triggered to fetch data for the selected month. If the same month is clicked again, the payrollId is reset along with the data.