sale report component
import React, { useEffect, useState } from "react";
import axios from "axios";
import { Form } from "react-bootstrap";
import { Link } from "react-router-dom";
function SalesReport() {
const [Data, setData] = useState([]);
const [dateBetweenState, setDateBetweenState] = useState({
stDate: "",
endDate: "",
});
let total = 0;
const handleChange = (e) => {
const newData = { ...dateBetweenState };
newData[e.target.name] = e.target.value;
setDateBetweenState(newData);
let sDate = newData.stDate;
let eDate = newData.endDate;
if (newData.stDate === "" && newData.endDate === "") {
fetchData();
}
if (newData.stDate === "") {
sDate = new Date();
}
if (newData.endDate === "") {
eDate = new Date();
}
axios
.get(
`http://localhost:4000/api/cash/showInviceBetween-date/'${sDate}'/'${eDate}'`
)
.then((res) => {
const getDataBetweenDate = res.data.data;
setData(getDataBetweenDate);
console.log(getDataBetweenDate);
});
};
useEffect(() => {
fetchData();
}, []);
const fetchData = () => {
axios.get("http://localhost:4000/api/cash/showInvoices").then((res) => {
const getData = res.data.data;
setData(getData);
console.log(getData);
});
};
return (
<div className="row">
<div className="card">
<div className="card-body">
<div className="d-inline-flex col-2 m-2">
<Form.Group controlId="dob">
<Form.Label>Start Date</Form.Label>
<Form.Control
type="date"
name="stDate"
value={dateBetweenState.stDate}
placeholder="Date of Birth"
onChange={(e) => {
handleChange(e);
}}
/>
</Form.Group>
<div className="ms-3">
<Form.Group controlId="dob">
<Form.Label>End Date</Form.Label>
<Form.Control
type="date"
name="endDate"
value={dateBetweenState.endDate}
placeholder="Date of Birth"
onChange={(e) => {
handleChange(e);
}}
/>
</Form.Group>
</div>
<div className="ms-2 mt-4">
<Link
to={{
pathname: "/print-sale-report",
state: Data,
dateBetweenState,
}}
>
<button className="btn btn-secondary btn-lg" type="button">
Print
</button>
</Link>
</div>
</div>
<table
id="datatable-buttons"
className="table table dt-responsive nowrap w-100"
>
<thead>
<tr>
<th width="100px">Date</th>
<th>Invoice Id</th>
<th>Pay Method</th>
<th>Total</th>
<th>Customer Id</th>
<th>Cart Id</th>
</tr>
</thead>
<tbody>
{Data &&
Data.map((items) => {
return (
<tr>
<td> {new Date(items.date).toLocaleDateString()}</td>
<td>{items.invoice_id}</td>
<td>{items.pay_method}</td>
<td>
{formatter.format(items.total)}
<span hidden>{(total += items.total)}</span>
</td>
<td>{items.customer_id}</td>
<td>{items.inovice_cart_id}</td>
</tr>
);
})}
</tbody>
<tfoot>
<tr className="text-black font-weight-bol">
<td>
<h5 className="total-label">Grand Total</h5>
</td>
<td className="total-col">
<label></label>
</td>
<td className="total-col">
<label></label>
</td>
<td className="total-col">
<label>{formatter.format(total)}</label>
</td>
<td className="total-col">
<label></label>
</td>
<td className="total-col">
<label></label>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
);
}
export default SalesReport;
report table component
import React, { useEffect, useState } from "react";
import "./ReportTable.css";
import { Link } from "react-router-dom";
import { useLocation } from "react-router-dom";
function ReportTable(props) {
const location = useLocation();
const [Data, setData] = useState([]);
let total = 0;
useEffect(() => {
fetchData();
}, []);
const fetchData = () => {
setData(location.state);
};
return (
<>
<div className="row" style={{ color: "black" }}>
<div className="fixed-top d-md-flex justify-content-md-start no-print">
<div className="m-5">
<Link to="/view-report">
<button className="btn btn-secondary me-md-2" type="button">
Back
</button>
</Link>
</div>
</div>
<div className="container">
<div className="col align-items-center">
<div className="col-12 mx-auto">
<div className="card">
<div className="card-body">
<h3>CircleBook(PVT) LTD</h3>
<h6>No 2/12 Pahala Gammaddagama, Kengalla 00100</h6>
<div className="d-inline-flex ">
<div className="card-header" id="header-label">
Daily cost of sales report
</div>
<div className="ms-5">
<label className="ms-5">Printed On :</label>
<label className="ms-2">
{" "}
{new Date().toLocaleString()}
</label>
</div>
</div>
<div className="row">
<div className="d-inline-flex">
<table>
<tbody>
<tr>
<th colSpan={2}>
<label>Date From :</label>
<label className="ms-2">
{location.dateBetweenState.stDate === ""
? new Date().toDateString()
: new Date(
location.dateBetweenState.stDate
).toDateString()}
</label>
</th>
<th>
<label className="ms-5"> Date To :</label>
<label className="ms-2">
{" "}
{location.dateBetweenState.endDate === ""
? new Date().toDateString()
: new Date(
location.dateBetweenState.endDate
).toDateString()}
</label>
</th>
</tr>
<tr>
<th colSpan={2}>
<label>Time From :</label>
<label className="ms-2"> All</label>
</th>
<th>
<label className="ms-5"> Time To :</label>
<label className="ms-2"> Now</label>
</th>
</tr>
<tr>
<th colSpan={2}>
<label>Location From :</label>
<label className="ms-2"> Kandy</label>
</th>
<th>
<label className="ms-5"> Location To :</label>
<label className="ms-2"> Kengalle</label>
</th>
</tr>
</tbody>
</table>
</div>
</div>
<div className="row">
<div className="d-inline-flex ">
<table width="100%">
<thead id="main-table-head">
<tr id="aa">
<th width="100px">Date</th>
<th>Invoice Id</th>
<th>Pay Method</th>
<th>Total</th>
<th>Customer Id</th>
<th>Cart Id</th>
</tr>
</thead>
<tbody>
{Data &&
Data.map((items) => {
return (
<tr>
<td>
{items.date}
</td>
<td>{items.invoice_id}</td>
<td>{items.pay_method}</td>
<td>
{items.total}
</td>
<td>{items.customer_id}</td>
<td>{items.inovice_cart_id}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}
export default ReportTable;
There are two components. 1st one is sale report component. 2nd one is report table component. I need to pass some state values one to second component. Here , sale report component have two data pickers , so if picked date, it stored in 'dateBetweenState' state. That state contains two objects. one is 'stDate' . It stored first datepicker value , 2 one is end date and it stored second datepicker value . apart from has 'Data' state too. so when I onclick on 'Print button' should be linked to 'Report table component' with above mentioned two state as well. Linking process work perfectly . using useLocation I got 'Date' state values but i cant access 'dateBetweenState' values .immediately came above 'TypeError: Cannot read properties of undefined (reading 'stDate')'. so I need to solve above issue. please help me experts.