React & Moment JS - How to map through upcoming dates only?

Question

I have a React Map, I'm trying to use the loop but only display the upcoming dates and the past dates data should not be displayed. I have installed Moment JS and tried to compare currentDate is greater than old date. But i get an empty map back.

What am i doing wrong?

My code:

filterMap.map((value, index) => {
    const concatData = [
        ...(value.opendag_department + ' - '),
        ...(value.opendag_data + ' - '),
        ...value.opendag_link,
    ];

    const date = Moment(value.opendag_data);
    const now = Moment().format('DD/M/YYYY');

    console.log(now, date._i);

    return data.push(
        date > now ? (
            <tr key={index}>
                <td data-th="Datum">{value.opendag_data}</td>
                <td data-th="Opleiding">
                    <strong>{value.opendag_department}</strong>
                </td>
                <td data-th="Link">
                    <a
                        target="_blank"
                        rel="noopener noreferrer"
                        href={value.opendag_link}>
                        bekijk website
                    </a>
                </td>
                <td data-th="Select">
                    <CheckBox
                        thisClassName="data__checkbox checkbox__input"
                        value={concatData.join('')}
                        id={'string_' + index}
                        onChange={checks}
                    />
                </td>
            </tr>
        ) : null
    );
});
return data;

is not clear .... you call return data.push(.... and after you call return data; out of map function.... there is something wrong ... explain better — Angelotti, Mar 08 '19 at 16:01
Maybe just use moments `diff` explained here: https://stackoverflow.com/a/21284895/4647839 you'll get an empty map because you are basically comparing strings in your code. — davbuc, Mar 08 '19 at 16:02
call data.push with out return and put return data before close } — Angelotti, Mar 08 '19 at 16:03
I am fetching data using Axios. Inside my Array i have a date in format DD/M/YYYY by default. I am using Momentum to compare PAST and CURRENT dates and ONLY display the current or upcoming events and don't show the past once. — , Mar 08 '19 at 16:03

will92 · Answer 1 · 2019-03-08T18:08:32.807

That's not how you should be using Array.prototype.map() since mapping creates a new array. You should first filter your array and map it later.

const filteredDate = filterMap.filter(value => {

    const date = Moment(value.opendag_data);
    const now = Moment().format('DD/M/YYYY');

    if (date > now)
       return date
})

return filteredDate.map(value => {

    const concatData = [
        ...(value.opendag_department + ' - '),
        ...(value.opendag_data + ' - '),
        ...value.opendag_link,
    ];

    return <tr key={index}>
             <td data-th="Datum">{value.opendag_data}</td>
             <td data-th="Opleiding">
                <strong>{value.opendag_department}</strong>
             </td>
             <td data-th="Link">
                <a
                  target="_blank"
                  rel="noopener noreferrer"
                  href={value.opendag_link}>
                  bekijk website
                </a>
             </td>
             <td data-th="Select">
               <CheckBox
                 thisClassName="data__checkbox checkbox__input"
                 value={concatData.join('')}
                 id={'string_' + index}
                 onChange={checks}
                />
              </td>
            </tr>
});

Let me know if it helps

score 0 · Accepted Answer · answered Mar 08 '19 at 18:18

Probably you date comparison does not correct. Instead of date > now you need to use something like that

const date = Moment(value.opendag_data);
// Do not use format method for create 'now date', it's return string insted of moment
const now = Moment();

// Do not use return with push, push is a void method
// I do not understand at all what you need to do in this method, 
// But you need using isAfter for detect if date is after current date 

date.isAfter(now) ? ... : ...

React & Moment JS - How to map through upcoming dates only?

2 Answers2