CODEWITHSUNDEEP
javascriptreactjsmomentjs
user10408806
user10408806

Reputation:

Moment JS - isAfter returning .isAfter is not a function?

I have a problem inside my React component. I am trying to only show the data which is upcoming in the future or today only. But i get this error:

.isAfter is not a function when i use the format.

Without the format it works, but i get wrong data back.

In short: I want to display upcoming events only.

my code:

showData = () => {
    const { checks } = this.props;

    return (
        this.state.opendagen.length > 0 &&
        this.state.opendagen.map((value, index) => {
            const { opendag_data: datum } = value;
            const date = Moment(datum, 'DD/MM/YYYY').format('DD/M/YYYY');
            const now = Moment().format('DD/M/YYYY');

            console.log('vandaag:', now, 'data:', date);

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

            return date.isAfter(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;
        })
    );
};

Upvotes: 2

Views: 15311

Answers (2)

Prithwee Das
Prithwee Das

Reputation: 5226

the date variable is not a moment object, as you have used the format here

const date = Moment(datum, 'DD/MM/YYYY').format('DD/M/YYYY');

format method on moment object returns a formatted string, so your date variable is just a string.

Upvotes: 5

Jon
Jon

Reputation: 10898

Moment().format() will return a string. A string will not respond to isAfter().

You need to either assign your formatted date to another variable, or just format it at the point you wish to display it:

const date = Moment(datum, 'DD/MM/YYYY');
const now = Moment();

return date.isAfter(now) ? ( // <-- this now works 
  ...

Upvotes: 0

Related Questions