How to get the next month from a date in React JS?

To get the next month from a given date in React using JavaScript, you can manipulate the Date object. Here’s how you can achieve this:

import React from 'react';

function NextMonthDate({ date }) {
  const getNextMonthDate = (inputDate) => {
    const currentMonth = inputDate.getMonth();
    const nextMonth = (currentMonth + 1) % 12; // Get the next month's index

    const year = inputDate.getFullYear() + (nextMonth === 0 ? 1 : 0); // Increment year if next month is January of the next year
    const day = Math.min(inputDate.getDate(), new Date(year, nextMonth + 1, 0).getDate()); // Handle days at the end of the month

    const nextMonthDate = new Date(year, nextMonth, day);
    return nextMonthDate.toISOString().split('T')[0];
  };

  const nextMonth = getNextMonthDate(new Date(date));

  return (
    <div>
      <p>Next month's date: {nextMonth}</p>
    </div>
  );
}

export default NextMonthDate;

In this example, the getNextMonthDate function calculates the next month’s date based on the provided input date. It first gets the current month’s index using getMonth() and calculates the index of the next month. If the next month’s index is 0 (which is January), it increments the year. The day is handled to ensure that it doesn’t exceed the last day of the next month.

The result is formatted as an ISO string, and the date part is extracted using split('T')[0].

You can use this component by passing a date as a prop:

<NextMonthDate date="2023-08-15" />

Replace "2023-08-15" with your desired input date in the format “YYYY-MM-DD”. As always, remember that JavaScript’s Date object works in the local time zone of the user’s device. If you need to handle time zones or more complex date manipulations, consider using a library like date-fns or moment.js.