by Sai gowtham

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:

Footer.js
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.

Footer.js
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

Footer.js
import React from "react";

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

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
130,921 students enrolled
48.5 hours of video content
View Course