Solution

To get current month in react js, use the new Date().getMonth() it will return 0 to 11 number, where 0 is January and 11 is December.

To get current month name in react js, use new Intl.DateTimeFormat("en-US", { month: "long" }).format(date) method it will return month name and you don’t have to install any package for it.

getMonth()

The getMonth() method returns the month in the specified date according to local time, as a zero-based value (where zero indicates the first month of the year).

Intl.DateTimeFormat()

The Intl.DateTimeFormat object enables language-sensitive date and time formatting.

Snippet

In this snippet, we will create date object and get month number from it.

const date = new Date();

let monthNumber = date.getMonth() + 1;
console.log("monthNumber", monthNumber); // monthNumber 9

monthNumber = monthNumber > 9 ? monthNumber.toString() : "0" + monthNumber;
console.log("monthNumber with 0 prefix", monthNumber); // monthNumber with 0 prefix 09

To get month name from date we can use Intl.DateTimeFormat() method it will return month name instead of index.

const date = new Date();

const monthName = new Intl.DateTimeFormat("en-US", { month: "long" }).format(
  date
);

console.log("monthName", monthName); // September

Example

In this example, we will show the current month number and month name in the console and page.

Let’s start coding…

import React, { useEffect } from "react";
export default function App() {
  useEffect(() => {
    console.log("Current Month Number", getMonthNumber());
    console.log("Current Month Name", getMonthName());
  }, []);

  const getMonthNumber = () => {
    const date = new Date();

    let monthNumber = date.getMonth() + 1;

    monthNumber = monthNumber > 9 ? monthNumber.toString() : "0" + monthNumber;

    return monthNumber;
  };

  const getMonthName = () => {
    const date = new Date();

    const monthName = new Intl.DateTimeFormat("en-US", {
      month: "long",
    }).format(date);

    return monthName;
  };

  return (
    <div className="App">
      <h1>{`Current Month Number`}</h1>
      <p>{getMonthNumber()}</p>
      <h1>{`Current Month Name`}</h1>
      <p>{getMonthName()}</p>
    </div>
  );
}

Output

Current, Month

codesandbox