How to display a current year in React

Learn, how to display a current year in React using the new Date() constructor.

We mostly display the current year in the footer section of an any web app like this.

<p>CopyRight 2018-2020</p>

Getting the current year

To get the current year in react, we need to call the getFullYear() method on a new Date() constructor.

The getFullYear() method returns the year in four-digit(2020) format according to the user local time.

Example:

import React from "react";

export default function Footer() {
  return (
    <footer>
      <p>{new Date().getFullYear()}</p> {/* Outputs 2020 */}    </footer>
  );
}

or we can create a function that returns the current year.

import React from "react";

export default function Footer() {

  const getCurrentYear = () => {
    return new Date().getFullYear();  };

  return (
    <footer>
      <p>{getCurrentYear()}</p>    </footer>
  );
}

You can also get the current year according to the universal time instead of user local time by using the getUTCFullYear() method

import React from "react";

export default function Footer() {
  return (
    <footer>
      <p>{new Date().getUTCFullYear()}</p> {/* Outputs 2020 */}    </footer>
  );
}