Custom scheduler carousel in react js not working as expected

Question

I am trying to achieve a custom scheduler carousel for daily view. Here's my approach, but its not working currently. code sandbox link: https://codesandbox.io/s/wild-sky-7l319u Refs are not working on clicking next or previous nothing is happening. I dont know maybe my previous and next logic is not working, but logging out the ref, showing it updates fine. What's wrong in this code and why is it not giving me the end result. what am I doing wrong here?

const DailyTable = () => {
  let time = [
    "12:00 AM",
    "01:00 AM",
    "02:00 AM",
    "03:00 AM",
    "04:00 AM",
    "05:00 AM",
    "06:00 AM",
    "07:00 AM",
    "08:00 AM",
    "09:00 AM",
    "10:00 AM",
    "11:00 AM",
    "12:00 PM",
    "01:00 PM",
    "02:00 PM",
    "03:00 PM",
    "04:00 PM",
    "05:00 PM",
    "06:00 PM",
    "07:00 PM",
    "08:00 PM",
    "09:00 PM",
    "10:00 PM",
    "11:00 PM",
  ];

  const boxRef = useRef(null);
  const boxRef2 = useRef([]);
  const addToRef = (el) => {
    boxRef2.current = [];
    if (boxRef2 && !boxRef2.current.includes(el)) {
      boxRef2.current.push(el);
    }
  };
  const previous = () => {
    boxRef.current.scrollLeft += -100;
    for (let index = 0; index < boxRef2.current.length; index++) {
     boxRef2.current[index].scrollLeft += -100;
    
    }
  };
  const next = () => {
    console.log(boxRef2.current.length);
    boxRef.current.scrollLeft += 100;
    for (let index = 0; index < boxRef2.current.length; index++) {
      console.log(boxRef2.current[index]);
      boxRef2.current[index].scrollLeft += 100;
    }
  };

 


  return (
    <Fragment>
      <Box sx={{ p: 3, borderRadius: "10px" }}>
        <TableContainer
          component={Paper}
          sx={{
            width: "calc(100% - 20px)",
            overflow: "hidden",
            borderBottomLeftRadius: 15,
            bottom: 0,
          }}
        >
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell
                    align="center"
                    sx={{ width: "150px", fontWeight: 700 }}
                  >
                    Worker
                  </TableCell>
                  <Box
                    sx={{
                      position: "relative",
                      display: "flex",
                      alignItems: "center",
                      borderBottom: "1px solid rgba(224, 224, 224, 1)",
                    }}
                  >
                    <span
                      style={{ cursor: "pointer", marginTop: 7 }}
                      onClick={previous}
                    >
                      {" "}
                      <FaArrowLeft />
                    </span>
                    <Box
                      ref={boxRef}
                      sx={{ width: "calc(100% - 20px)", overflow: "hidden" }}
                    >
                      {time.map((item, index) => {
                        return (
                          <TableCell
                            key={index}
                            id={index}
                            sx={{ minWidth: 20, borderBottom: "none" }}
                          >
                            {item}
                          </TableCell>
                        );
                      })}
                    </Box>
                    <span
                      style={{
                        marginTop: 7,
                        cursor: "pointer",
                        position: "absolute",
                        right: 10,
                      }}
                      onClick={next}
                    >
                      {" "}
                      <FaArrowRight />
                    </span>
                  </Box>
                </TableRow>
              </TableHead>
              {workers.map((item, index) => {
                return (
                  <TableBody>
                    <Box
                      ref={addToRef}
                      sx={{
                        width: "calc(100% - 20px)",
                        overflow: "hidden",
                        position: "relative",
                        top: 1,
                      }}
                    >
                      {time.map((timeV, index) => {
                        return (
                          <TableCell
                            key={index}
                            id={index}
                            align="left"
                            sx={{
                              verticalAlign: "middle",
                              height: 77,
                              minWidth: 100,
                              p: 0.7,
                              borderRight: "1px solid rgba(224,224,224,1)",
                            }}
                          >
                            {item.assignWorks.map((work, index) => {
                              var mStart = moment(work.assignDetails.startTime);
                              var roundUpStartTime =
                                mStart.minute() ||
                                mStart.second() ||
                                mStart.millisecond()
                                  ? mStart.add(1, "hour").startOf("hour")
                                  : mStart.startOf("hour");
                              var width =
                                work.assignDetails.timeDiff == 0
                                  ? 106
                                  : work.assignDetails.timeDiff * 106;
                              let count = 0;
                              if (
                                roundUpStartTime.format("hh:mm A") === timeV
                              ) {
                                count += 1;
                                return (
                                  <Box key={index}>
                                    {(work.assignDetails.status === "pending" ||
                                      work.assignDetails.status ===
                                        "request") && (
                                      <Chip
                                      onClick={() => {
                                        setSelectedJob(work._id);
                                        setShowEditJob(true);
                                      }}
                                        label={work.name}
                                        sx={{
                                          mb: 2,
                                          borderRadius: "5px",
                                          fontWeight: 600,
                                          backgroundColor: `${colors.chip.lightBlue}`,
                                          color: `${colors.chip.Blue}`,
                                          width: width - 12,
                                        }}
                                      />

                            )}
                          </TableCell>
                        );
                      })}
                    </Box>
                  </TableBody>
                );
              })}
            </Table>
        </TableContainer>
      </Box>
    </Fragment>
  );
};

i tried to apply next and previous logic its not working. only thing i want if i click prev the refs should work accordingly.

Answer 1

One issue I can see in your code is that you are using boxRef2.current = [] in your addToRef function. This will reset the boxRef2.current array every time the addToRef function is called. To fix this, you can use the concat method to add the new element to the existing boxRef2.current array.