Reactjs – Data passing with React

In the code below "CameraPage.tsx", a logic is made where its function is to search for camera images, it is simple, it just makes a GET request and searches for the images registered in the backend, which will later be shown in the FrontEnd, the operation is correct.

When the user clicks on "InfoOutlineIcon" another page should be loaded, showing the images, however when it is clicked, the other page opens, but the images are not shown. The problem that is occurring is that, when you click, the console.log shows that the images are loaded, however when opening the new page it is as if everything started from scratch, and there was no request made, therefore, no image is loaded / shown in FrontEnd.

// CameraPage.tsx FILE CODE
function CameraPage() {
  const fetchCameraImage = async (cameraId: number, currentPageImages: number): Promise<boolean> => {
    if (!accessToken) {
      console.log("Access token not found");
      return false;
    }

    try {
      console.log("Calling responseFetchCameraImage");
      let responseFetchCameraImage;
      const page = currentPageImages > 0 ? currentPageImages : 1;
      const size = 20;

      responseFetchCameraImage = await axios.get(`${API_URL}/api/v1/imagens/pagination/${cameraId}?page=${page}&size=${size}`, {
        headers: {
          Authorization: `Bearer ${accessToken}`
        },
      });

      console.log(responseFetchCameraImage)
      if (responseFetchCameraImage.status === 200) {
        const images = responseFetchCameraImage.data.items;
        const cameraImages = images.filter((image: any) => image.camera_id === cameraId);
        console.log(cameraImages)

        if (cameraImages && cameraImages.length > 0) {
          const uniqueImagesData: ImageData[] = [];
          cameraImages.forEach((image: any) => {
            const imageData: ImageData = {
              imageURL: `data:image/jpg;base64,${image.image}`,
              data: image.data,
              placa: image.placa,
              score: image.score,
            };
            uniqueImagesData.push(imageData);
          });

          setImageData(uniqueImagesData);

          console.log("Images found");
          return true;
        } else {
          console.error("This camera has no images yet");
          return false;
        }
      } else {
        console.error("Error while trying to fetch camera images");
        return false;
      }
    } catch (error) {
      console.error("Error while trying to fetch camera images");
      errorTimeout = setTimeout(() => {
        setError("");
      }, 3000);
      return false;
    }
  };

  useEffect(() => {
    const fetchData = async () => {
      if (editingCameraId !== null) {
        const success = await fetchCameraImage(editingCameraId, currentPageImages);

        if (success) {
          setCurrentPageImages(1);
          setImageCounter(0);
        }
      }
    };

    fetchData();
  }, [editingCameraId, currentPageImages]);

  return (
    <Layout>
      <Flex justifyContent='center' alignItems='center'>
        <IconButton
          aria-label="View images"
          size="sm">
            <InfoOutlineIcon
              onClick={async () => {
              const hasImage = await fetchCameraImage(camera.id, currentPageImages);
              if (hasImage) {
              routerAfterClickInfoCamera.push('CameraImages')
              }
            }}
          />
        </IconButton>
      {camera.name}
    </Flex>
</Layout>
  );
}

export default CameraPage;

The code below "CameraForm.tsx" is where the images should be shown, and with routerAfterClickInfoCamera.push('CameraForm') you are taken to that page, however, nothing is shown, as previously said. But I can’t understand how to do this, I’ve been researching but I can’t understand, if anyone can help me, I’m grateful.

// CameraForm.tsx FILE CODE
export interface ImageData {
  imageURL: string;
  data: string;
  placa: string;
  score: number;
}

interface CameraModalProps {
  imageData?: ImageData[];
  currentPageImages: number;
  imagesPerPage: number;
}

const CameraImages: React.FC<CameraModalProps> = ({
  imageData = [],
  currentPageImages,
  imagesPerPage,
}) => {

  const [searchPlaca, setSearchPlaca] = useState("");

  const startIndex = (currentPageImages - 1) * imagesPerPage;

  const endIndex = startIndex + imagesPerPage;

  // Filter images by placa
  const filterImagesByPlaca = () => {
    if (searchPlaca === "") {
      return imageData;
    }

    return imageData.filter((image) =>
      image.placa.toLowerCase().includes(searchPlaca.toLowerCase())
    );
  };

  // Get images filtered by placa
  const filteredImages = filterImagesByPlaca();

  const visibleImages = filteredImages.slice(startIndex, endIndex) ?? [];

  return (
    <Layout>
      <Head title={"Câmeras"} />
      <Flex justifyContent="space-between">
        <Title title="IMAGEM" />
      </Flex>

      <Box>
        <Input
          type="text"
          border="none"
          style={{
            marginLeft: "1rem",
            outline: "none",
            backgroundColor: "transparent",
            borderBottom: "1px solid #ccc",
          }}
          width="auto"
          placeholder="Buscar placa"
          value={searchPlaca}
          onChange={(e) => setSearchPlaca(e.target.value)}
        />
      </Box>
      <Box>
        {visibleImages.map((imageData, index) => {
          const { imageURL, data, placa, score } = imageData;
          const imageNumber = startIndex + index + 1;
          return (
            <Box key={index} borderBottom="1px solid #ccc" py={2}>
              <Text fontSize={["sm", "md"]} fontWeight="normal">
                Imagem {imageNumber}
              </Text>
              <Text fontSize={["sm", "md"]} fontWeight="normal">
                Data: {data}
              </Text>
              <Text fontSize={["sm", "md"]} fontWeight="normal">
                Placa: {placa}
              </Text>
              <Text fontSize={["sm", "md"]} fontWeight="normal">
                Score: {score}
              </Text>
              <ChakraImage src={imageURL} alt={`Image ${index}`} />
            </Box>
          );
        })}
      </Box>
    </Layout>
  )
}

export default CameraImages;