content is exceeding but 2nd page is not coming !

[bilal-abubaker]

import React, { useEffect, useState } from "react";
import { db } from "../Firebase";
import TextField from "@material-ui/core/TextField";
import StaticDateRangePicker from "@material-ui/lab/StaticDateRangePicker";
import AdapterDateFns from "@material-ui/lab/AdapterDateFns";
import LocalizationProvider from "@material-ui/lab/LocalizationProvider";
import { Box } from "@material-ui/core";
import { useParams } from "react-router-dom";
import { Table } from 'react-bootstrap';
import './AdminBookerExpense.css'
import { Button } from "react-bootstrap";
import Pdf from "react-to-pdf";

function AdminBookerExpense(props) {
const emailForCheck = localStorage.getItem('testing');
console.log(emailForCheck)
const [dates, setDates] = React.useState([new Date(), new Date()]);
const [recordExpense, getRecordExpense] = React.useState([""]);
const { data } = useParams();
const newData = data.split("+");
console.log(props)
console.log(props.tester)
let email = newData[0];
var lastDate = "Pick A Date"
var Lmonth = ""
var Lyear = ""
const ref = React.createRef();
const options = {
orientation: 'landscape',
unit: 'in',
format: "[4,2]"
};
var filteringByEmail = [];
filteringByEmail = recordExpense.filter((c) => c.emailId === emailForCheck);
const resetTime = (dateIsoString) => {
const date = new Date(dateIsoString);
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
return date;
};
var arrayForDates = filteringByEmail.filter((e) => {
const _startDate = new Date(resetTime(dates[0]));
const _endDate = new Date(resetTime(dates[1]));
const _creationDate = new Date(resetTime(e.CreatedAt));

if (!dates[0] || !dates[1]) return false;

console.log(_startDate === _creationDate);
if (_startDate == _endDate) {
  return _startDate === _creationDate;
}

return _startDate <= _creationDate && _creationDate <= _endDate;

});
const firstDate = dates[0];
const Fday =firstDate.getDate()
const Fmonth = firstDate.getMonth()+1
const Fyear = firstDate.getFullYear()
try {
useEffect(async () => {
await db
.collection("recordsExpense")
.onSnapshot((snapshot) =>
getRecordExpense(snapshot.docs.map((doc) => doc.data()))
);
}, []);
} catch (error) {
console.log("not found");
alert("not Found");
}

if (dates[1]==null){

console.log("Pick a Date")

}
else{
lastDate = dates[1].getDate()
Lmonth = dates[1].getMonth()+1
Lyear = dates[1].getFullYear()
}
console.log(lastDate)
const Lday = lastDate

console.log(filteringByEmail);
console.log(arrayForDates)

var accumulator1 = [];
accumulator1 = arrayForDates.reduce(function (accumulator, currentValue) {
return accumulator +Number( currentValue.records.total);
}, 0);
console.log(accumulator1);

return (

  <LocalizationProvider dateAdapter={AdapterDateFns}>
    <StaticDateRangePicker
      displayStaticWrapperAs="desktop"
      value={dates}
      onChange={(newValue) => {
        setDates(newValue);
      }}
      renderInput={(startProps, endProps) => (
        <React.Fragment>
          <TextField {...startProps} />
          <Box sx={{ mx: 2 }}> to </Box>
          <TextField {...endProps} />
        </React.Fragment>
      )}
    />
  </LocalizationProvider>
  <Pdf targetRef={ref} style={{pageBreakAfter:"always"}} x={-105} y={5} size="A4" scale={1} filename="div-blue.pdf" >
    {({ toPdf }) => <Button className="btn-b" onClick={toPdf}>Generate Pdf</Button >}
  </Pdf>
  <div  style={{pageBreakAfter:"always"}}  ref={ref}>
    <>
    <h1 style={{textAlign:"center"}}>

{You Picked From ${Fday}-${Fmonth}-${Fyear} To ${Lday}-${Lmonth}-${Lyear}}

{arrayForDates.map((item) => ( <>

  <th>Area</th>
  <th>Fares</th> 
  <th>Kilometres</th>
  <th>LocalOutStation</th>
  <th>OsExtra</th>
  <th>Petrol</th>
  <th>total</th>

</tr>

</tr>

{item.records.area}	{item.records.fares}	{item.records.km}	{item.records.localOutstation}	{item.records.osExtra}	{item.records.petrol}	{item.records.total}

{/*

{item.records.area}

{item.records.fares}

{item.records.km}

{item.records.localOutstation}

{item.records.osExtra}

{item.records.petrol}

*/}

))}

Total = {accumulator1}

    </>
  </div>
</div>

);
}

export default AdminBookerExpense;