Adding days to date in-line in React

Question

prescription.prescriptionDate gives me a proper date object

prescription.prescriptionExpirationDate gives me a number (7, 14)

Please keep in mind I am trying to get this done in-line.

I am trying to add the number 7 or 14 into the date object and it should give me a new date object with the 7 or 14 days added into it. I am definitely doing something wrong as I get this error:

TypeError: Cannot read property 'getDate' of undefined

Here's my code:

<Typography variant="body2" component="p">
    {new Date(prescription.prescriptionDate).setDate(prescription.prescriptionDate.getDate() + prescription.prescriptionExpirationDate).toDateString()}
   </Typography>

Here's the code that works, to prove that I do get infact the prescription.prescriptionDate value correctly.

<Typography variant="body2" component="p">
        {new Date(prescription.prescriptionDate).toDateString()}
       </Typography

well, your prescriptionDate is obviously undefined? It works in the Date constructor as it does Date.now when nothing is provided — dube, Mar 04 '21 at 12:20
my prescriptionDate is not undefined, and it does not answer my question as I am trying to do it inline. — Harry, Mar 04 '21 at 12:22
In addition to the comment by @dube 7/14 is not a number, it's a fraction that resolves to 0.5. *setDate* expects an expression that resoles to an integer and returns the new time value of the date as a number, which doesn't have a *toDateString* method. There seems to be an error in nearly every expression in the statement. — RobG, Mar 04 '21 at 12:30
Please check the main question again, I've edited it to clear up any misunderstanding. — Harry, Mar 04 '21 at 12:33
Put a console.log above it, your prove does not prove anything. new Date(undefined) works because it defaults to "now". But undefined.getDate() does not. — dube, Mar 04 '21 at 12:34
The [`setDate`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setDate) method does not return a date, just milliseconds... So calling `.toDateString` on an integer will fail. — Mr. Polywhirl, Mar 04 '21 at 12:36
I've added a condition for the inline function to run only if the prescription.prescriptionDate is not undefined. I've also console.log'd {newDate(prescription.prescriptionDate).toDateString()} and it works. I am getting an error that prescription.prescriptionDate.getDate is not a function however. — Harry, Mar 04 '21 at 12:41
@dube—passing the undefined value (versus not passing any value) as in `new Date(undefined)` returns an invalid Date. So while it doesn't throw an error, it won't return today's date. — RobG, Mar 04 '21 at 13:02
Until you can post code that replicates the issue (i.e. *toString* returns a valid date but *getDate* throws an error) there's not much that can be done. — RobG, Mar 04 '21 at 13:06

RobG · Accepted Answer · 2021-03-04T12:58:28.407

If prescription.prescriptionDate is a Date and prescription.prescriptionExpirationDate is a number like 7 or 14, then to keep it on one line as a single expression is the very verbose and inefficient:

new Date(new Date(prescription.prescriptionDate).setDate(prescription.prescriptionDate.getDate() + prescription.prescriptionExpirationDate)).toDateString()

E.g.

let prescription = {
  prescriptionDate: new Date(),  // Today
  prescriptionExpirationDate: 7  // Days to add
};

let date = new Date(new Date(prescription.prescriptionDate).setDate(prescription.prescriptionDate.getDate() + prescription.prescriptionExpirationDate)).toDateString();

console.log(date); // 7 days from today

The error message:

TypeError: Cannot read property 'getDate' of undefined

is saying that prescription.prescriptionDate returns the value undefined. The rest of the expression will work, the only issue will be calling getDate on undefined, e.g.

let prescription = {
  prescriptionExpirationDate: 7  // Days to add
};

try {
  let date = new Date(new Date(prescription.prescriptionDate).setDate(prescription.prescriptionDate.getDate() + prescription.prescriptionExpirationDate)).toDateString();
} catch (e) {
  console.log(e.message); 
}

After further testing, I came to a solution that does not require it to be inline. I absolutely agree with you, thank you for your input. Have a great day. — Harry, Mar 04 '21 at 12:49

score 1 · Answer 2 · answered Mar 04 '21 at 13:05

I would just create a function called addDays and just render the date by calling the function. It just looks cleaner, especially if you're using React.

/* utils/date.js */
const addDays = (date, days) => {
  const copy = new Date(date.getTime());
  copy.setDate(copy.getDate() + days);
  return copy;
};
// export { addDays };
// ===================================================================
// import { addDays } from 'utils/date';
const MyComponent = () => {
  const state = {
    prescription: {
      prescriptionDate: new Date(),
      prescriptionExpirationDate: 7
    }
  };
  const {
    prescription: {
      prescriptionDate: date,
      prescriptionExpirationDate: expirationDate
    }
  } = state;
  return addDays(date, expirationDate).toDateString(); // Render
};
// export default MyComponent;
// ===================================================================
document.write(MyComponent()); // <MyComponent />

html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { display: flex; justify-content: center; align-items: center; font-size: 3em; }

Consider `const addDays = (d, days) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + days)`. ;-) — RobG, Mar 04 '21 at 13:12

Adding days to date in-line in React

2 Answers2