如何在数组reactjs中找到一个值

Question

I have a list of dates sent by the backend. I need to work on that list to do a check. If I have March dates in the list, I need to display the March events, and if I have April dates in the list, I need to display the April events and so on.

However, I need to search the list by month and thus check what to display on the front end.

In my code that I provide below, events.date would be the time to check to see if there is an event in March within the list.

list:

0: "2020-03-25"
1: "2020-03-26"
2: "2020-03-27"
3: "2020-03-28"
4: "2020-03-29"
5: "2020-03-30"
6: "2020-03-31"
7: "2020-04-01"
8: "2020-04-02"
9: "2020-04-13"
10: "2020-05-16"
11: "2020-06-27"

code:

{
  !events ? (
    <Loading />
  ) : events.date === 0 ? (
    []
  ) : (
    <>
      <h1>Eventos de Março</h1>
      <Month events={events} />
    </>
  );
}

Answer 1

You could use reducer get get a list of present months. and then to check if there's the month you need.

["2020-03-25",
"2020-03-26",
"2020-03-27",
"2020-03-28",
"2020-03-29",
"2020-03-30",
"2020-03-31",
"2020-04-01",
"2020-04-02",
"2020-04-13",
"2020-05-16",
"2020-06-27"].reduce(function (a, b) {
    const d = new Date(b);
    if (a.indexOf(d.getMonth() + 1) === -1) {
        a.push(d.getMonth() + 1);
    }
    return a;
}, []).indexOf(4) !== -1; // <-- checking if April (4th month) is here.

Answer 2

Try something like

const datearr=events.map(dates=>{
  let date = new Date(dates);
  let monthno = date.getMonth();
  if( monthno===2 ){
   return date.getDay()
}

})

Answer 3

To handle this effectively, we'll need custom functionality.
Try this:

/* @param: month (type: number, range: 1-12)
 * @returns: boolean (true/false)
 */
const EventDates = (month) => {
  return ListOfDates.map(
    // generate list of months
    i => { let d = new Date(i); return d.getMonth() + 1; }
  ).includes(month); // check if a given month exists
};

console.log(EventDates(4))
// true
console.log(EventDates(1))
// false

You can then place this within the jsx code:

-  ) : events.date === 0 ? (
//  replace with
+  ) : EventDates(month) ? (
// Either utilize `state` or `props` to change "month" parameter