Как правильно реализовать фильтр по дате в React?

Question

[b3Nky]

Помогите пожалуйста разобраться почему не работает фильтр, есть таблица, нужно сделать постраничный вывод и фильтр по дате, фильтр привязал, но не могу понять как нужно добавить этому контролу возможность устанавливать даты и возможность сообщать об изменении.
Заранее прошу прощения за свой вопрос, я только знакомлюсь с JS и React.

App

import React, { Component } from "react";
import Loader from "./Loader/Loader";
import _ from "lodash";
import ReactPaginate from "react-paginate";
import Table from "./Table/Table";
import MyDateFilter from "./DatePicker/DatePicker";

const accessToken = "";
const apiUrl = "";

class App extends Component {
  state = {
    isLoading: true,
    data: [],
    currentPage: 0,
    startDate: null,
    setStartDate: null,
    endDate: null,
    setEndDate: null,
  };

  async componentDidMount() {
    const response = await fetch(`${apiUrl}`, {
      method: "GET",
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });

    const data = await response.json();
    this.setState({
      isLoading: false,
      data: data.payments,
    });
  }

  pageChangeHandler = ({ selected }) =>
    this.setState({ currentPage: selected });

  getFilteredData() {
    let { data, startDate, endDate, setEndDate, setStartDate } = this.state;

    if (!startDate || !endDate) {
      return data;
    }

    let result = data.filter((payment) => {
      if (startDate && endDate) {
        return (
          new Date(startDate) < new Date(payment.created_at) &&
          new Date(payment.created_at) < new Date(endDate)
        );
      } else if (!result.length) {
        result = this.state.data;
      }
      return result;
    });
  }

  

  render() {
    const pageSize = 5;
    const filteredData = this.getFilteredData();
    const displayData = _.chunk(filteredData, pageSize)[this.state.currentPage];
    const pageCount = Math.ceil(filteredData.length / pageSize);
    return (
      <div className="container">
        <MyDateFilter />
        {this.state.isLoading ? <Loader /> : <Table data={displayData} />}
        {this.state.data.length > pageSize ? (
          <ReactPaginate
            previousLabel={"<"}
            nextLabel={">"}
            breakLabel={"..."}
            breakClassName={"break-me"}
            pageCount={pageCount}
            marginPagesDisplayed={2}
            pageRangeDisplayed={5}
            onPageChange={this.pageChangeHandler}
            containerClassName={"pagination"}
            activeClassName={"active"}
            pageClassName="page-payment"
            pageLinkClassName="page-link"
            previousClassName="page-payment"
            nextClassName="page-payment"
            previousLinkClassName="page-link"
            nextLinkClassName="page-link"
            forcePage={this.state.currentPage}
          />
        ) : null}
      </div>
    );
  }
}

export default App;

DatePicker

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export const MyDateFilter = () => {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);

  return (
    <div className="MyDateFilter">
      <span>Start Date:</span>
      <DatePicker selected={startDate} onChange={setStartDate} isClearable />
      <span>End Date:</span>
      <DatePicker selected={endDate} onChange={setEndDate} isClearable />
    </div>
  );
};

export default MyDateFilter;

Table

import React from "react";

export default (props) => (
  <table className="table" cellPadding={0} cellSpacing={0}>
    <thead>
      <tr>
        <th>id</th>
        <th>status</th>
        <th>token</th>
        <th>currency</th>
        <th>product</th>
        <th>redirect_success_url</th>
        <th>redirect_fail_url</th>
        <th>amount</th>
        <th>created_at</th>
        <th>updated_at</th>
        <th>extra_return_param</th>
        <th>operation_type</th>
        <th>order_number</th>
      </tr>
    </thead>
    <tbody>
      {props.data.map((payment) => (
        <tr key={payment.id}>
          <td> {payment.id} </td>
          <td> {payment.status} </td>
          <td> {payment.token} </td>
          <td> {payment.currency} </td>
          <td> {payment.product} </td>
          <td> {payment.redirect_success_url} </td>
          <td> {payment.redirect_fail_url} </td>
          <td> {payment.amount} </td>
          <td> {payment.created_at} </td>
          <td> {payment.updated_at} </td>
          <td> {payment.extra_return_param} </td>
          <td> {payment.operation_type} </td>
          <td> {payment.order_number} </td>
        </tr>
      ))}
    </tbody>
  </table>
);

Answer 1

[seropaski]

Компонент DatePicker на данный момент меняет стейт только внутри себя. Судя по требованиям он должен менять стейт внутри компонента App, т.е. тебе надо прокинуть startDate и endDate из App в DatePicker, а также методы для изменения этих дат