Exception from Tracker recompute function, RangeError: Invalid time value | react, meteor,

Question

I'm getting an error saying Exception from Tracker recompute function and RangeError: Invalid time value.

The problem is sometime the card gets undefined and since it is undefined, I can't run this : const dateFormat = isThisYear(createdAt) ? "MMM d" : "MMM d, yyyy";

Is there a way to execute dateFormat only when the card has value?

import React from "react";
import Child from "./Child";
import { format, isThisYear } from "date-fns";

const Sample = ({ card }) => {
  const { createdAt, title } = card || {};

  const dateFormat = isThisYear(createdAt) ? "MMM d" : "MMM d, yyyy";
  const createdDate = format(createdAt, dateFormat);

  return (
    <>
      <Child createdDate={createdDate} />
    </>
  );
};

export default Sample;

Answer 1

This isn't a necessarily a Meteor.js question , but more of a vanilla javascript question , you should check for truthiness of your variables before returning them . createdAt and(or) title in this case . I might approach you situation as below .

import React from "react";
import Child from "./Child";
import { format, isThisYear } from "date-fns";
  
const Sample = ({ card }) => {
  const { createdAt, title } = card || {};
  if (createdAt) {
    const dateFormat = isThisYear(createdAt) ? "MMM d" : "MMM d, yyyy";
    const createdDate = format(createdAt, dateFormat);
  }
  if (createdDate) {
    return (
     <>
       <Child createdDate={createdDate} />
     </>
    );
  } else {
    return (
     <>
       <Child createdDate={} />
     </>
    );   
  }
};
  
export default Sample;