Fetch data between two dates in React from Django API

Question

I am trying to filter data between two dates and display it in a table. Currently, my table shows all the data from the database but I want the user to be able to select from that date to this date, and data between the specified dates to be displayed in the table. My code:

import React from "react";
import APIHandler from "../utils/APIHandler";
import _ from "lodash";
import moment from "moment";
import DatePicker from "react-datepicker";
import { initiateGetTransactions } from "../components/Transactions";
import ReactHTMLTableToExcel from "react-html-table-to-excel";

class FarmerStatementComponent extends React.Component {

    constructor(props) {
        super(props);
        console.log(props.match.params.id);
    }

    state = {
        errorRes: false,
        errorMessage: "",
        btnMessage: 0,
        sendData: false,
        orders: [],
        startDate: new Date(),
        endDate: new Date(),
        dataLoaded: false,
        formSubmitted: false,
        name: "",
        id: "",
    };  

    componentDidMount() {
        this.fetchFarmerData().then(response => {
            console.log(response.data);
            this.setState({
                orders: response.data
            });
        });
    }

    handleStartDateChange = (date) => {
        this.setState({
            startDate: date
        });
    }

    handleEndDateChange = (date) => {
        this.setState({
            endDate: date
        });
    }

    handleSubmit = (event) => {
        debugger;

        event.preventDefault();

        const data = { startDate:this.state.startDate, endDate:this.state.endDate};

        
    }

    async fetchFarmerData() {
        var apihandler = new APIHandler();
        var farmerdata = await apihandler.fetchFarmerDetails(this.props.match.params.id);
        console.log(farmerdata);
        this.setState({ orders: farmerdata.data.data.orders });
        this.setState({ name: farmerdata.data.data.name });
        this.setState({ phone: farmerdata.data.data.phone });
        this.setState({ dataLoaded: true });
    }

    print() {
        window.print();
    }

    render() {
       
        return (
            <section className="content">
                 <div className="container-fluid">
                    <div className="block-header">
                       <h2>FARMER STATEMENT</h2>
                    </div>

                    <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div className="card">
                            <div className="header">
                                <h2>
                                    {this.state.name}'S STATEMENT
                                </h2>

                                <div className="header-dropdown m-r--5">
                                    <h2>
                                        {this.state.id} 
                                    </h2>
                                </div>
                                
                            </div>

                            <div className="body">
                                <div className="table-responsive">
                                    <div id="DataTables_Table_1_wrapper" className="dataTables_wrapper form-inline dt-bootstrap">
                                        <div className="dt-buttons">
                                            <a className="dt-button buttons-csv buttons-html5" tabIndex="0" aria-controls="DataTables_Table_1" href="#">
                                                <span>
                                                <ReactHTMLTableToExcel 
                                                    className="btn btn-success"
                                                    tabIndex="0" 
                                                    aria-controls="DataTables_Table_1"
                                                    table="DataTables_Table_1"
                                                    filename="FarmerStatement"
                                                    sheet="Sheet"
                                                    buttonText="Excel"
                                                />
                                                </span>
                                            </a> 
                                            <a className="dt-button buttons-print" tabIndex="0" aria-controls="DataTables_Table_1" href="#" onClick={this.print}>
                                                <span onClick={() => this.print()}>Print</span>
                                            </a>
                                            <br/>
                                            <form onSubmit={this.handleSubmit}>
                                                <button type="submit" className="btn btn-info" >
                                                    Generate Report
                                                </button>
                                            </form>
                                        </div>
                                        
                                        <div id="DataTables_Table_1_filter" className="dataTables_filter">
                                            <form onSubmit={this.handleSubmit}>
                                                <label>
                                                    <i className="material-icons">date_range</i>Start Date:
                                                        <DatePicker
                                                            selected={this.state.startDate}
                                                            className="form-control datepicker" 
                                                            name="Start Date: 30/07/2022"
                                                            aria-controls="DataTables_Table_1"
                                                            value={this.state.startDate}
                                                            onChange={this.handleStartDateChange}
                                                        />
                                                </label>
                                                <br/>
                                                <label>
                                                    <i className="material-icons">date_range</i>End Date:
                                                        <DatePicker
                                                            selected={this.state.endDate}
                                                            className="form-control datepicker" 
                                                            name="End Date: 30/07/2022"
                                                            aria-controls="DataTables_Table_1"
                                                            value={this.state.endDate}
                                                            onChange={this.handleEndDateChange}
                                                        />
                                                </label>
                                            </form>    
                                        </div>
                                        {this.state.dataLoaded === false ? (
                                            <div className="text-center">
                                                <div className="preloader pl-size-xl">
                                                    <div className="spinner-layer">
                                                        <div className="circle-clipper left">
                                                            <div className="circle"></div>
                                                        </div>
                                                        <div className="circle-clipper right">
                                                            <div className="circle"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        ) : ""}

                                        <table className="table table-bordered table-striped table-hover dataTable js-exportable" id="DataTables_Table_1" role="grid" aria-describedby="DataTables_Table_1_info">
                                            <thead>
                                                <tr role="row">
                                                    <th className="sorting_asc" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style={{width: "40px"}}>
                                                        #ORDER NO
                                                    </th>
                                                    <th className="sorting" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-label="Position: activate to sort column ascending" style={{width: "150px"}}>
                                                        CUSTOMER NAME
                                                    </th>
                                                    <th className="sorting" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-label="Office: activate to sort column ascending" style={{width: "101px"}}>
                                                        KILOS
                                                    </th>
                                                    <th className="sorting" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-label="Age: activate to sort column ascending" style={{width: "100px"}}>
                                                        PRICE PER KG
                                                    </th>
                                                    <th className="sorting" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-label="Start date: activate to sort column ascending" style={{width: "115px"}}>
                                                        ORDERED ON
                                                    </th>
                                                </tr>
                                            </thead>
                                            
                                            <tbody>   
                                            {this.state.orders.map((farmer) => (
                                                <tr role="row" className="odd" key={farmer.id}>
                                                    <td className="sorting_1">{farmer.id}</td>
                                                    <td className="sorting_1">{farmer.customer.name}</td>
                                                    <td className="sorting_1">{farmer.kgs}</td>
                                                    <td className="sorting_1">{farmer.price}</td>
                                                    <td className="sorting_1">{new Date(farmer.added_on).toLocaleString()}</td>
                                                </tr>
                                            ))}
                                            </tbody>
                                        </table>
                                        <div className="dataTables_info" id="DataTables_Table_1_info" role="status" aria-live="polite">
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                 </div>
            </section>    
             
        );
    }
    
}

export default FarmerStatementComponent;

Answer 1

You can add filter in query or you can do filter to incoming data from database before passing to table