Реакция: Как отфильтровать события по дате

Question

Я отображаю события в таблице в js-файле следующим образом:

 // index.component.js

import React, { Component } from 'react';
import axios from 'axios';
import TableRow from './TableRow';
import moment from 'moment';
export default class Index extends Component {

constructor(props) {
  super(props);
  this.state = {event: []};
}
componentDidMount(){
  axios.get('http://localhost:4000/event')
    .then(response => {
      this.setState({ event: response.data });

    })
    .catch(function (error) {
      console.log(error);
    })
}


tabRow(){
  var events = this.state.event
  events.sort((a,b) => {return new Date(a.startDate) - new 
Date(b.startDate)} ) ;
  return events.map(function(object, i){
  return <TableRow obj={object} key={i} />;
});
}


render() {
  return (
    <div>
      <table className="table table-striped" style={{ marginTop: 20 , width:700}}>
        <tbody>
          { this.tabRow() }
        </tbody>
      </table>
    </div>
  );
}

}

My table.js

// TableRow.js


class TableRow extends Component {
constructor(props) {
    super(props);
 }

render() {
return (

    <tr>
      <td>
        {this.props.obj.event_name} 
      </td>
      <td>{ moment(this.props.obj.startDate).format("MMMM D, Y") }</td>
      <td>
        <button onClick={this.delete} className="btn btn- 
      danger">Delete</button>
      </td>
     </tr>
     );
     }
      }
   export default TableRow;

Сейчас я использую функцию сортировки событий, так как выможно увидеть в приведенном выше коде, чтобы отсортировать события по датам, самое старое событие, которое будет первым в списке.Это работает хорошо.Я хотел бы отфильтровать массив, чтобы события, которые уже прошли, не появлялись в моей финальной таблице.Как я могу сравнить его с текущей датой и отфильтровать старые события?

Answer 1

Вам необходимо вычесть текущую дату из даты вашего события и проверить, если она меньше 0. Если это так, она в прошлом, и вы можете игнорировать ее.Таким образом, функция фильтра должна выглядеть примерно так:

const dates = ["2018-09-12", "2018-10-18", "2018-12-30"];
const filteredDates = dates.filter(d => new Date(d) - new Date() > 0);

И вот как это будет выглядеть в вашем случае:

events = events.filter(a => new Date(a.startDate) - new Date > 0);